フォント読み込み最適化｜CLSを防ぐフォント戦略

はじめに

Webフォント（Google Fonts等）はデザインの品質を高めるが、不適切に実装するとCore Web VitalsのCLS（Cumulative Layout Shift）を悪化させ、表示速度を低下させる原因になります。

フォントはユーザーが最初に見る「テキスト」に直結するため、適切な読み込み戦略は「高品質なデザイン」と「高速な表示」を両立するために不可欠です。

本記事では、Webフォントが引き起こす問題の種類・各font-display設定の違い・next/fontによる最適化・実践的な実装戦略を解説します。

Webフォントが引き起こす2つの問題

問題1：FOIT（Flash of Invisible Text）

フォントが読み込まれるまでテキストを表示しない状態です。ユーザーには「テキストが見えない時間」として体験され、コンテンツを読み始めるまでに時間がかかります。

発生条件：font-display: block または font-display: optional でフォントが間に合わない場合

問題2：FOUT（Flash of Unstyled Text）

フォールバックフォント（システムフォント）でテキストをとりあえず表示し、Webフォントが読み込まれたタイミングでフォントが切り替わる状態です。フォントのサイズ・行間が変わることでレイアウトシフト（CLS）が発生します。

発生条件：font-display: swap でフォントサイズが異なる場合

これら2つの問題を最小化するためのフォント読み込み戦略が重要です。

font-displayの5つの設定値

CSSの @font-face に設定する font-display プロパティは、フォント読み込み中の動作を制御します。

font-display: auto（デフォルト）

ブラウザのデフォルト動作に従う。多くのブラウザでは block に近い動作をします。

推奨度：低（パフォーマンス最適化されていない）

font-display: block

フォントが読み込まれるまでテキストを非表示にする（FOIT）。フォントが完全に読み込まれてから表示するため、レイアウトシフトは発生しないが、テキストが見えない時間が生じます。

推奨度：一般的なケースでは非推奨

font-display: swap

フォールバックフォントですぐにテキストを表示し（FOUT）、Webフォントが読み込まれたらスワップ（切り替え）します。テキストはすぐ見えるがレイアウトシフトが発生する可能性があります。

推奨度：テキストの即時表示を優先する場合（Google Fontsのデフォルト設定）

font-display: fallback

最初の短い時間（約100ミリ秒）は非表示、その後フォールバックフォントで表示、そして一定時間（約3秒）以内にWebフォントが読み込まれたらスワップします。3秒以上かかった場合はスワップしません。

推奨度：中（パフォーマンスとデザインのバランス）

font-display: optional

最初の短い時間だけWebフォントをフェッチします。間に合わなかった場合はフォールバックフォントを使い続け、スワップしません。CLSは完全に回避できますが、Webフォントが適用されないケースがあります。

推奨度：CLSをゼロにしたい場合

フォントサイズの調整でCLSを最小化する

font-display: swap を使用してもCLSが発生するのは、フォールバックフォントとWebフォントのサイズ・行間が異なるためです。

CSSの size-adjust・ascent-override・descent-override・line-gap-override プロパティを使って、フォールバックフォントのサイズをWebフォントに近づけることで、スワップ時のレイアウトシフトを最小化できます。

この設定はフォントによって適切な値が異なるため、ツールを使って最適な値を計算することが推奨されます。

next/fontによる完全な自動最適化

Next.jsの next/font は、Webフォントの最適化に関するすべてのベストプラクティスを自動で実装します。

next/fontの主な機能

フォントのセルフホスティング

Google Fontsを外部から読み込む代わりに、ビルド時にフォントをダウンロードしてVercelのCDNで配信します。これにより：

• Googleのサーバーへの外部リクエストが不要になります

• DNS解決・コネクション確立の遅延がなくなります

• プライバシーの観点から好ましい（Googleにフォント参照情報が送信されない）

CLSの自動防止

size-adjust 等のCSS変数を自動計算・適用して、フォールバックフォントとWebフォントのサイズを一致させる。スワップ時のレイアウトシフトを最小化します。

適切なfont-displayの設定

デフォルトで最適な font-display 設定が適用されます。

フォント読み込みの最適化施策まとめ

施策1：フォントのセルフホスティング（またはnext/fontの使用）

Google Fontsを <link> タグで読み込む代わりに、フォントファイルを自社のサーバー・CDNでホスティングします。

効果：DNS解決・コネクション確立の追加時間を削減。100〜300ミリ秒の改善が見込める。

施策2：フォントファイルのプリロード

フォントファイルを他のリソースより優先してダウンロードさせる。テキストが早く表示されます。

施策3：woff2形式の使用

フォントフォーマットのうちwoff2は最も圧縮率が高く、現代のすべてのブラウザが対応しています。woff2のみを提供することでファイルサイズを削減できます。

施策4：使用するウェイト・文字セットを最小化する

フォントは「ウェイト（太さ）」と「文字セット（対応する文字の範囲）」の組み合わせで複数のファイルに分かれます。

使用しないウェイト（400・700だけ使う場合に300・500・600等を読み込まない）・使用しない文字セット（日本語サイトで latin のみ読み込む等）を除外してファイルサイズを削減します。

施策5：日本語フォントの最適化

日本語フォントは漢字の量が多いため、英語フォントと比べてファイルサイズが非常に大きい（数MB〜数十MBになることがある）。

対策

• Googleの日本語フォントはサブセット化されており、実際に使用している文字のみのファイルを自動で配信する（next/fontで使用するとこれが自動適用される）

• フォントのサブセット化ツール（pyftsubset等）で使用する文字だけに絞ったフォントファイルを作成します

実践的なフォント戦略の選択

まとめ

Webフォントの最適化は「FOITとFOUTのトレードオフを理解した上で、適切なfont-displayを設定する」ことが基本です。

Next.jsのnext/fontを使うと、セルフホスティング・CLS防止・適切なfont-display設定・日本語フォントのサブセット化がすべて自動化されます。

次の記事では、Next.jsでCore Web Vitalsを最大化するための具体的な設定をまとめて解説します。