1.

CSS フォント関連プロパティ完全ガイド（font-family / size / weight / 一括指定 / Web フォント）

▶
編集
この記事の要点
  • フォント関連プロパティは文字の見た目を制御する 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
400normalRegular
500-Medium
700boldBold
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 など) で終わらせれば安全。

編集
Post Share
子ページ
  1. font-familyプロパティ
  2. font-sizeプロパティ
  3. font-weightプロパティで文字の太さを指定する
  4. font-styleプロパティ
  5. font-variantプロパティ
  6. fontプロパティ
同階層のページ
  1. フォント
  2. テキスト
  3. ボックス関連プロパティ
  4. 色
  5. 背景
  6. トランスフォーム
  7. アニメーション
  8. その他のCSSプロパティ
2026-06-11 07:29:05 guest 193

人気ページ

最近更新/作成されたページ