Webフォントとパフォーマンス

Webフォントは美しいタイポグラフィを実現しますが、適切に設定しないとページの表示速度やCore Web Vitalsに悪影響を与えます。特にCLS（Cumulative Layout Shift）とLCP（Largest Contentful Paint）への影響が大きいです。

font-display の設定値

値	動作	推奨度
`swap`	まずフォールバックフォントで表示、読み込み後に差し替え	★★★ 推奨
`optional`	接続速度次第でWebフォントをスキップ	★★★ 高速環境向け
`block`	フォント読み込みまでテキスト非表示（最大3秒）	★ 非推奨
`auto`	ブラウザのデフォルト（通常block相当）	★★ 要改善
`fallback`	100ms非表示後、フォールバック→差し替え	★★ 中程度

Google Fontsは便利ですが、外部サーバーへの接続が発生するためGDPRの観点で問題になる場合があります。Google Fontsからwoff2ファイルをダウンロードし、サーバーにホストすることで、プライバシーとパフォーマンスの両方を改善できます。

1ページで使用するWebフォントは4種類以内が推奨です。フォントが増えるほど追加のHTTPリクエストが発生し、FCP（First Contentful Paint）が遅延します。デザインシステムを整備し、フォントファミリーを統一することを推奨します。