# フォント読み込み最適化｜CLSを防ぐフォント戦略 元のページ: サイト表示速度の改善方法｜Core Web Vitals対策ガイド フォント読み込み最適化としてCLSを防ぐフォント戦略を解説します。FOITとFOUTの違い・font-displayの5つの設定値・next/fontによる自動最適化・日本語フォント対策をまとめています。 ## **はじめに** Webフォント（Google Fonts等）はデザインの品質を高めるが、不適切に実装するとCore Web VitalsのCLS（Cumulative Layout Shift）を悪化させ、表示速度を低下させる原因になります。 フォントはユーザーが最初に見る「テキスト」に直結するため、適切な読み込み戦略は「高品質なデザイン」と「高速な表示」を両立するために不可欠です。 本記事では、Webフォントが引き起こす問題の種類・各font-display設定の違い・next/fontによる最適化・実践的な実装戦略を解説します。 サイト表示速度がUXやSEOに与える影響を詳しく知りたい方は「[**サイト表示速度とは（UXとSEOへの影響）**](https://chot-inc.com//knowledge/what-is-site-speed)」をご覧ください。 ## **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を \ タグで読み込む代わりに、フォントファイルを自社のサーバー・CDNでホスティングします。 効果：DNS解決・コネクション確立の追加時間を削減。100〜300ミリ秒の改善が見込める。 ### **施策2：フォントファイルのプリロード** フォントファイルを他のリソースより優先してダウンロードさせる。テキストが早く表示されます。 ### **施策3：woff2形式の使用** フォントフォーマットのうちwoff2は最も圧縮率が高く、現代のすべてのブラウザが対応しています。woff2のみを提供することでファイルサイズを削減できます。 ### **施策4：使用するウェイト・文字セットを最小化する** フォントは「ウェイト（太さ）」と「文字セット（対応する文字の範囲）」の組み合わせで複数のファイルに分かれます。 使用しないウェイト（400・700だけ使う場合に300・500・600等を読み込まない）・使用しない文字セット（日本語サイトで latin のみ読み込む等）を除外してファイルサイズを削減します。 ### **施策5：日本語フォントの最適化** 日本語フォントは漢字の量が多いため、英語フォントと比べてファイルサイズが非常に大きい（数MB〜数十MBになることがある）。 対策 - Googleの日本語フォントはサブセット化されており、実際に使用している文字のみのファイルを自動で配信する（next/fontで使用するとこれが自動適用される） - フォントのサブセット化ツール（pyftsubset等）で使用する文字だけに絞ったフォントファイルを作成します ## **実践的なフォント戦略の選択** | **状況** | **推奨設定** | | - | - | | Next.js＋Vercelを使用 | next/font + display: 'swap' | | CLSを完全にゼロにしたい | next/font + display: 'optional' | | Google Fonts（従来方式）を使用 | display=swap パラメーター付きで読み込む | | カスタムフォントをセルフホスト | woff2形式 + preload + display: swap | ## **まとめ** Webフォントの最適化は「FOITとFOUTのトレードオフを理解した上で、適切なfont-displayを設定する」ことが基本です。 Next.jsのnext/fontを使うと、セルフホスティング・CLS防止・適切なfont-display設定・日本語フォントのサブセット化がすべて自動化されます。 次の記事では、Next.jsでCore Web Vitalsを最大化するための具体的な設定をまとめて解説します。 ## エージェント型Web・AIアプリ 開発のご相談 chot inc.ではエージェント型Webの設計・構築・ 運用を 一貫してサポートしています。 [お問い合わせ](https://chot-inc.com/contact) ## このテーマの他の記事 - ### [サイト表示速度とは？なぜUXとSEOの両方に影響するのか](https://chot-inc.com/knowledge/what-is-site-speed) [サイト表示速度とは何か、なぜUXとSEOの両方に影響するのかを解説します。直帰率・CV率・Core Web Vitalsのランキング要因としての位置づけ・速度が遅くなる6つの原因をまとめています。](https://chot-inc.com/knowledge/what-is-site-speed) - ### [Core Web Vitalsとは？LCP・INP・CLSの意味と目標値](https://chot-inc.com/knowledge/core-web-vitals-explained) [Core Web VitalsのLCP・INP・CLSの意味と目標値を解説します。各指標の定義・良好・要改善・不良の基準・悪化する原因・Field DataとLab Dataの違いをまとめています。](https://chot-inc.com/knowledge/core-web-vitals-explained) - ### [Lighthouseの使い方｜スコアの見方と表示速度の改善手順](https://chot-inc.com/knowledge/lighthouse-guide) [LighthouseとはGoogleのパフォーマンス計測ツールです。PageSpeed Insights・Chrome DevTools・CLIの3つの起動方法・スコアの読み方・改善サイクルの回し方をまとめています。](https://chot-inc.com/knowledge/lighthouse-guide) [サイト表示速度の改善方法｜Core Web Vitals対策ガイド一覧](https://chot-inc.com/knowledge/themes/web-performance)