Webフォント読み込みバジェットとベストプラクティス
Webフォント読み込みのバジェットを設定し、パフォーマンスへの影響を最小化する技術を学びます：サブセット、font-display、可変フォント、システムフォントスタック、プリロード戦略。
Category Budget
詳細な説明
Webフォント読み込みバジェット
Webフォントはデザインを向上させますが、パフォーマンスコストが伴います。単一のフォントファイルは20-100 KBの範囲で、多くのサイトは4-8個のフォントファイル（複数のウェイトとスタイル）を読み込み、タイポグラフィだけで200-400 KBを消費します。
フォントバジェットの設定
| バジェットレベル | サイズ | 戦略 |
|---|---|---|
| 最小限 | 0 KB | システムフォントスタックのみ |
| リーン | 30-50 KB | 1フォント、1-2ウェイト、サブセット |
| 適度 | 50-80 KB | 1-2フォント、2-3ウェイト、サブセット |
| リッチ | 80-120 KB | 可変フォント + サブセット |
フォントサブセット
ほとんどのラテン文字ページは100-200文字しか使用しません。完全なフォントファイルには全言語用の500以上のグリフが含まれています。サブセットで未使用文字を削除します：
- 完全版Roboto Regular: 168 KB（非圧縮）
- ラテンサブセット: 15 KB（gzip圧縮）
- カスタムサブセット（基本ラテン + 数字）: 10 KB
可変フォント
可変フォントはすべてのウェイト/幅/イタリックバリエーションを単一ファイルに含みます：
- 4つの個別ファイル（Regular、Bold、Italic、Bold Italic）: 合計~80 KB
- 1つの可変フォントファイル: ~40-60 KB
font-display戦略
font-display CSSプロパティはフォント読み込み中の動作を制御します：
- swap — 本文テキストに最適。フォールバックフォントを即座に表示し、カスタムフォント読み込み後にスワップ。
- optional — パフォーマンスに最適。即座に利用可能な場合（キャッシュ済みなど）のみフォントを読み込む。
- fallback — 妥協案：短い不可視期間、フォールバック、そしてスワップ。
ユースケース
フォントバジェット計画は、タイポグラフィがデザインシステムの重要な部分であるブランド重視のサイトで重要ですが、すべてのキロバイトが重要なパフォーマンスクリティカルなアプリケーションでも重要です。ニュースサイトはラテンサブセットの45 KBの可変フォント1つを選択し、font-display: swapでFlash of Invisible Text（FOIT）を回避するかもしれません。内部ダッシュボードはカスタムフォントを完全にスキップし、50-100 KBを節約してフォント読み込みによるレイアウトシフトを排除できます。