この記事の要点

font-weight は文字の太さを指定する CSS プロパティ。100 〜 900 の 9 段階＋キーワード normal = 400、bold = 700。lighter / bolder は親を基準に 1 段階変える 指定した weight のフォントが存在しないとブラウザが近い weight にフォールバック（合成 bold になることも） Variable Font なら font-weight: 350 のような任意の値が使える（連続的） @font-face で font-weight: 100 900; と範囲指定するのが Variable Font の正しいロード法

基本の指定方法

/* 数値（推奨） */
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 */

キーワード / 数値の対応

数値	キーワード	一般名
100		Thin, Hairline
200		Extra Light, Ultra Light
300		Light
400	normal	Regular, Normal, Book
500		Medium
600		Semi Bold, Demi Bold
700	bold	Bold
800		Extra Bold, Ultra Bold
900		Black, Heavy

lighter / bolder の挙動

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

親の weight	bolder	lighter
1〜99	400	100
100〜349	400	100
350〜549	700	100
550〜749	900	400
750〜899	900	700
900〜	900	700

フォールバックと合成 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

要素	デフォルト weight
p / span / div / 本文	normal (400)
h1 〜 h6	bold (700)
strong / b	bold (700)
em / i	normal (400)（斜体だが太さは normal）
th	bold (700)
button	normal (400)（UA 依存）

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 とも整合します。