過去バージョン

基本の指定方法

/* 数値（推奨） */
p { font-weight: 400; }       /* normal */
strong { font-weight: 700; }  /* bold */

/* キーワード */
p.light { font-weight: lighter; }
p.thick { font-weight: bolder; }
p.normal { font-weight: normal; }
p.bold { font-weight: bold; }

/* 9 段階 */
.w100 { font-weight: 100; }   /* Thin / Hairline */
.w200 { font-weight: 200; }   /* Extra Light */
.w300 { font-weight: 300; }   /* Light */
.w400 { font-weight: 400; }   /* Normal / Regular */
.w500 { font-weight: 500; }   /* Medium */
.w600 { font-weight: 600; }   /* Semi Bold / Demi Bold */
.w700 { font-weight: 700; }   /* Bold */
.w800 { font-weight: 800; }   /* Extra Bold */
.w900 { font-weight: 900; }   /* Black / Heavy */

キーワード / 数値の対応

lighter / bolder の挙動

親要素の weight を基準に1 段階だけ軽く / 重くします。実際には次の表に従ってジャンプ:

フォールバックと合成 bold

指定した weight のフォントファイルが無い場合、ブラウザが最も近い weight を選びます。さらに「太字版が存在しない」ときは合成（synthetic） boldとして強制的に線を太らせます:

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;  /* Regular */
}

strong {
  font-weight: 800;  /* Extra Bold */
  /* もし 800 が無ければ 700 にフォールバック */
  /* それも無ければブラウザが合成 bold（見た目が荒くなる） */
}

/* 合成を禁止して、本来のフォントウェイトだけ使う */
strong {
  font-synthesis: none;
}

Variable Font を使う

Variable Font は1 ファイルで連続的に weight を変えられる新世代フォント:

/* @font-face で範囲指定 */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-VariableFont.woff2') format('woff2-variations');
  font-weight: 100 900;     /* ★ 100 〜 900 の任意の値が使える */
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Inter', sans-serif;
}

p { font-weight: 350; }       /* ✅ 連続値が指定可能 */
h1 { font-weight: 875; }      /* ✅ */
.subtle { font-weight: 425; } /* ✅ Light と Regular の間 */

Google Fonts での Variable Font

<!-- 100-900 全範囲 -->
<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=Inter:wght@100..900&display=swap" rel="stylesheet">

@font-face で固定 weight をロード

/* Regular */
@font-face {
  font-family: 'NotoSansJP';
  src: url('/fonts/NotoSansJP-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: 'NotoSansJP';
  src: url('/fonts/NotoSansJP-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ★ 同じ font-family で異なる weight ファイルを別個に登録するのが正しい
   font-weight: 400 と font-weight: 700 でブラウザが自動で正しい方を使う */

font-style / font-stretch との組合せ

/* 短縮形 font */
p {
  font: italic bold 16px/1.5 'Noto Sans JP', sans-serif;
  /*   style weight size/line-height family */
}

/* 個別指定 */
p {
  font-style: italic;
  font-weight: 700;
  font-stretch: 95%;     /* Variable Font の幅も連続可 */
  font-size: 16px;
  line-height: 1.5;
}

ブラウザのデフォルト weight

Web Font のロード戦略

weight 別に WOFF2 を全部ロードするとFCP が遅くなる。よく使う weight だけ初期ロードし、それ以外は遅延:

<!-- 1. 本文に使う Regular だけ preload -->
<link rel="preload"
      href="/fonts/NotoSansJP-Regular.woff2"
      as="font" type="font/woff2" crossorigin>

<!-- 2. Bold は font-display: swap で順次 -->
<style>
  @font-face {
    font-family: 'NotoSansJP';
    src: url('/fonts/NotoSansJP-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;       /* ★ 読込中はシステムフォント */
  }
</style>

<!-- 3. Variable Font なら 1 ファイルで全範囲 -->

よくある落とし穴

• 500 / 600 が指定通り出ない → そのフォントに 500/600 が存在しない（多くの和文フォントは 400/700 のみ）
• bolder にしてもほぼ変わらない → 親が既に 700 だと 900 が無いと変化しない
• 合成 bold で字形が崩れる → font-synthesis: none を入れて本来の weight のみ使う
• Variable Font なのに連続値が効かない → @font-face の font-weight に範囲 100 900 を書き忘れている

FAQ

Q: 日本語フォントで Variable Font が使える？
A: Noto Sans JP / M PLUS など Google Fonts の主要和文に Variable 版があります。

Q: font-weight: 0 や 1000 は？
A: 仕様外。多くのブラウザは clamp して 100 / 900 として扱います。

Q: 数値とキーワード、どちらが推奨？
A: 数値推奨。デザインシステムで一貫した weight 管理がしやすく、Variable Font とも整合します。