Web フォントはパフォーマンス問題の 2 つのカテゴリを引き起こします: フォントスワップによるレイアウトシフト（CLS）と、大きなフォントファイルや外部接続によるロード時間のオーバーヘッド。このガイドでは両方をカバーし、フォントによる CLS をゼロにしてフォントロード時間を 60% 短縮する具体的な設定を解説します。

WOFF2：必要な唯一のフォーマット

WOFF2 は Brotli 圧縮を使用し、2016 年からすべての主要ブラウザでサポートされています。 WOFF、TTF、EOT を提供する理由はもうありません。WOFF2 のみを提供してください。典型的なラテン系フォントをサブセット化すると 18 KB まで圧縮できます。

サブセット化：最大の成果

サイトが特定の言語のみをサポートする場合、その文字セットだけが必要です。ラテン系にサブセット化すると一般的なフォントを 80〜150 KB から 15〜25 KB に削減します。Next.js の next/font はビルド時に Google Fonts を自動的にサブセット化してセルフホストします。

セルフホスティング vs Google Fonts

Google Fonts は複数の DNS ルックアップと接続が必要です。セルフホスティングはこれらのステップを排除します。高速接続で ~100 ms の差、低速接続では 500 ms 以上の差があります。

font-display：スワップの制御

値	動作	CLS リスク
swap	即座にフォールバック、準備できたらスワップ	高（スワップ時のレイアウトシフト）
optional	非常に短いブロック、準備できなければスワップなし	なし（絶対にスワップしない）

本文テキストには font-display: optional で CLS を完全に排除。見出しには font-display: swap が許容できます。

フォントのプリロード

最も重要なフォントファイルにプリロードリンクを追加します。crossorigin 属性は同一オリジンフォントにも必須です — ないと二重ダウンロードが発生します。

可変フォント

可変フォントは 1 つのファイルにすべての太さとスタイルを含みます。同じファミリーから 2 種類以上の太さが必要な場合に使用します。320 KB（4 ファイル）から ~70 KB（1 ファイル）に削減できます。