この記事の要点

フォント関連プロパティは文字の見た目を制御する CSS の中核。種別 / サイズ / 太さ / 斜体などを指定 主要 5 プロパティ: font-family / font-size / font-weight / font-style / line-height 一括指定: font: italic bold 16px/1.5 "Noto Sans JP", sans-serif; — 順序とサイズ必須 Web フォント: @font-face で独自フォント、Google Fonts なら <link> 1 行で導入 パフォーマンス: font-display: swap でフォント読み込み待ちの白画面を防ぐ

CSS フォント関連プロパティ概観

CSS でフォントを指定するプロパティは複数あり、それぞれが文字の種別・サイズ・太さ・スタイル・行間を担当します。本記事では主要なプロパティの使い分けと、Web フォントの導入方法までを整理します。

プロパティ	用途	例
font-family	書体の種類	"Noto Sans JP", sans-serif
font-size	文字サイズ	16px / 1.2rem / 110%
font-weight	文字の太さ	normal / bold / 700
font-style	斜体 / 通常	italic / normal
font-variant	スモールキャップス等	small-caps
line-height	行の高さ	1.5 / 24px
font	上記の一括指定	bold 16px/1.5 sans-serif
letter-spacing	字間	0.05em
word-spacing	単語間	0.2em
text-transform	大文字小文字	uppercase

font-family — 書体の指定

カンマ区切りで複数指定すると、左から順にユーザー環境にインストール済みのフォントを探します。最後に総称ファミリ (sans-serif / serif / monospace) を必ず指定。

/* 日本語サイトの定番 */
body {
    font-family:
        "Hiragino Sans",          /* Mac */
        "Yu Gothic",              /* Windows */
        "Noto Sans JP",           /* Web フォント */
        sans-serif;               /* 最終フォールバック */
}

/* 等幅フォント (コード表示) */
code {
    font-family:
        "Source Code Pro",
        "Consolas",
        "Menlo",
        monospace;
}

フォント名にスペースが含まれる場合はクォートで囲みます。

font-size — 文字サイズ

単位	意味	使いどころ
px	絶対サイズ	固定したい部分
em	親要素のフォントサイズ基準	相対調整
rem	ルート (html) のサイズ基準	推奨。ユーザー設定が効く
%	親要素基準	em と同じ
vw	ビューポート幅基準	レスポンシブな見出し
clamp()	最小〜推奨〜最大	流動タイポグラフィ

html { font-size: 16px; }       /* 1rem = 16px */

h1 { font-size: 2rem; }         /* 32px */
p  { font-size: 1rem; }         /* 16px */

/* レスポンシブな見出し (320px〜1200px で 24px〜48px) */
h1.fluid {
    font-size: clamp(1.5rem, 2vw + 1rem, 3rem);
}

font-weight — 太さ

キーワードと数値の両方で指定できます。数値は100〜900 の 100 刻み。

数値	キーワード	呼び名
100	-	Thin
300	-	Light
400	normal	Regular
500	-	Medium
700	bold	Bold
900	-	Black

フォントが該当ウェイトを持たない場合、ブラウザが最も近いウェイトで代用するため、細い指定が太く見えることがあります。

font 一括指定

font ショートハンドは複数プロパティを 1 行で指定できますが、順序とサイズが必須。

/* 構文: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family */
body {
    font: italic bold 16px/1.5 "Noto Sans JP", sans-serif;
}

/* シンプル版 */
p {
    font: 14px sans-serif;       /* size と family は必須 */
}

注意: 一括指定は指定していないプロパティを初期値にリセットするため、既存の font-weight 等を残したい場合は個別指定の方が安全です。

Web フォントの導入

方法1: Google Fonts (簡単)

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
</head>

body {
    font-family: "Noto Sans JP", sans-serif;
}

方法2: @font-face で自前ホスト

@font-face {
    font-family: "MyFont";
    src: url("/fonts/MyFont.woff2") format("woff2"),
         url("/fonts/MyFont.woff")  format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;            /* 重要 */
}

body { font-family: "MyFont", sans-serif; }

font-display: swap をつけると、フォント読み込み中はシステムフォントで表示し、後で差し替わります。これで FOIT (Flash of Invisible Text = 白画面) を防げます。

FAQ

Q: 日本語 Web フォントは重い
A: 平均 5〜10MB ある。サブセット化（使う文字だけ抽出）か、Adobe Fonts / Google Fonts の動的サブセット (woff2) を使う。

Q: !important が効かないことがある
A: ブラウザの最小フォントサイズ設定が優先される。Chrome は設定 > 外観 > カスタマイズで変更可。

Q: ベンダーフォント名を間違えるとどうなる
A: そのフォントを無視して次の候補へ。必ず総称ファミリ (sans-serif など) で終わらせれば安全。