可変フォント（Variable Fonts）入門｜使うべき場面と捨てる判断

:::note ※可変フォントを使うか迷っている人向けの「判断用」記事です :::

私は variable fonts を「標準」にしていない

採用するのは、理由が明確なときだけ。

大半のサイトは 400/700 の2ウェイトで足りる。2ウェイトなら通常のフォント2ファイルで十分。可変フォントにする意味がない。

「便利そうだから」で採用すると、後で「別に要らなかった」となる。

結論（私の判断基準）

使うべき場面：3ウェイト以上使う、アニメーションしたい、容量を減らしたい
使わなくていい場面：400/700 の2ウェイトで足りる（大半のサイト）
迷ったら：使わない。通常のフォントで十分なことが多い

💡 実際に試したい → Font Preview でウェイトを変えながら確認

可変フォントを使うべき場面

場面1：3ウェイト以上使うデザイン

/* 400/500/600/700 を使いたい */
.body { font-weight: 400; }
.caption { font-weight: 500; }
.subheading { font-weight: 600; }
.heading { font-weight: 700; }

通常のフォントだと4ファイル必要。可変フォントなら1ファイル。

場面2：ウェイトをアニメーションしたい

.animated-weight {
  font-weight: 400;
  transition: font-weight 0.3s ease;
}

.animated-weight:hover {
  font-weight: 700;
}

通常のフォントだと「カクッ」と切り替わる。可変フォントなら滑らかに変化する。

場面3：容量を本気で減らしたい

通常のフォント：

NotoSansJP-Regular.woff2  (400) ... 約1MB
NotoSansJP-Medium.woff2   (500) ... 約1MB
NotoSansJP-Bold.woff2     (700) ... 約1MB
→ 合計約3MB

可変フォント：

NotoSansJP-Variable.woff2 (100-900) ... 約1.5MB
→ 1ファイル

可変フォントを使わなくていい場面

場面1：400/700 の2ウェイトで足りる（大半のサイト）

/* これで十分なサイトが大半 */
body { font-weight: 400; }
h1, h2, h3 { font-weight: 700; }

2ウェイトなら、通常のフォント2ファイルで十分。可変フォントにする意味がない。

場面2：アニメーションしない

ウェイトを動的に変えないなら、可変フォントのメリットが薄い。

場面3：対応フォントが限られている

使いたいフォントに可変フォント版がないことも多い。選択肢が狭まる。

従来のフォントとの違い

項目	通常のフォント	可変フォント
ファイル数	ウェイトごとに1つ	1つで全ウェイト
指定できるウェイト	100刻み（400, 700など）	任意の値（450, 650など）
アニメーション	カクカク	滑らか
容量	ウェイト数に比例	1ファイルで済むことが多い

基本的な使い方

CSS での読み込み

@font-face {
  font-family: 'Noto Sans JP Variable';
  src: url('/fonts/NotoSansJP-Variable.woff2') format('woff2');
  font-weight: 100 900; /* 対応範囲を指定 */
  font-display: swap;
}

font-weight: 100 900 のように範囲で指定するのがポイント。

ウェイトの指定

/* 通常: 100刻みでしか指定できない */
font-weight: 400;
font-weight: 700;

/* 可変フォント: 任意の値を指定可能 */
font-weight: 350;
font-weight: 450;
font-weight: 650;

Google Fonts での利用

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">

wght@100..900 の表記で、100から900までの全ウェイトを1ファイルで取得。

ブラウザ対応

ブラウザ	対応状況
Chrome 66+	✅
Firefox 62+	✅
Safari 11+	✅
Edge 17+	✅

IE11 は非対応だが、フォールバックとして通常の font-weight が適用されるので表示は崩れない。

2025年現在、主要ブラウザは全て対応。

迷ったときの判断

迷い	私の判断
使うべきか	3ウェイト以上使うなら検討、2ウェイトなら不要
容量が気になる	2ウェイトなら通常フォントの方が軽いこともある
アニメーションしたい	可変フォント一択

**迷ったら使わない。**通常のフォントで足りるケースが大半。

この記事で解決しない場合

ウェイトの選び方がわからない → font-weightの数値と見た目
Google Fontsの読み込みを最適化したい → Google Fontsの読み込み方法

「使える」と「使うべき」は違う。可変フォントは後者を見極めてから採用する。