Google FontsをセルフホストしてCore Web Vitalsを改善する

Google FontsをセルフホストしてCore Web Vitalsを改善する

2025 Web Almanacによると、全Webサイトの54%でGoogle Fontsが使われています。その大半が、Googleのサーバーからフォントを読み込んでいます。これが問題です。Google Fontsをリクエストするたびに、外部への接続とrender blockingなCSSが発生します。そのフォントファイルは、preloadもキャッシュも制御もできません。同じフォントをセルフホストすれば、これらの問題はすべて解消します。所要時間も10分ほどです。

Arjen Karel による最終レビュー（2026年2月）

Core Web Vitalsを理解する

Core Web Vitalsは、Googleがランキングシグナルとして採用している3つの指標です。LCP（読み込み）、INP（インタラクティブ性）、CLS（視覚的安定性）で構成されています。フォントをセルフホストすると主にLCPとCLSが改善し、First Contentful Paint（FCP）の向上にも役立ちます。

Google FontsがCore Web Vitalsに与える影響

タイポグラフィやデザインを向上させるために導入されるGoogle Fontsですが、Core Web Vitals、特にLargest Contentful Paint（LCP）やCumulative Layout Shift（CLS）に大きな影響を与えます。

私が話す人の大半は、この事実を知りません。GoogleのCDNは世界最高峰のはずです。ではなぜ、Google Fontsはページの表示速度を低下させるのでしょうか。

1. 「共有キャッシュ」という考え方は、もはや通用しません。Google Fontsは広く普及しているため、訪問者が別のサイトですでにフォントをキャッシュしているはずだと、多くの開発者が今も信じています。それが通用したのは2020年までの話です。Chrome 86やSafari（2013年から導入）以降、ブラウザはHTTPキャッシュをトップレベルドメインごとに分離しています。そのため、訪問者が過去にどのサイトを訪れていようと、新規訪問のたびにGoogle Fontsを最初からダウンロードすることになります。CDNの共有キャッシュによるパフォーマンス上のメリットは、もはや存在しません。

2. 新規訪問者にとって、スタイルシートはブラウザキャッシュに絶対に存在しません。Google Fontsの第1の問題は、fonts.google.com や fonts.googleapis.com でホストされる外部スタイルシートに依存している点です。このスタイルシートは、ドメインをまたいで再利用できません（多くの人が再利用できると思い込んでいます）。つまり、初回訪問時にrender blockingなスタイルシートが高速なブラウザキャッシュから配信されることは決してなく、ページのレンダリングは常に遅延します。

3. 2つの新しいサーバーに対して2回の接続が必要です。第2の問題は、CSSファイルとフォントファイルをダウンロードするために、2つの異なるサーバーに接続しなければならない点です。新しいサーバーへの初回接続には大きなオーバーヘッドが伴い、余分な時間がかかります。自身のサーバーとすでに確立されている接続から配信していれば、節約できたはずの時間です。これを回避するため、Googleは自社ドメインへの preconnect を推奨しています。それによって問題はある程度緩和されますが、決して完璧ではありません。

4. font-display 属性の制御が制限されます。Google Fontsでも font-display 属性の設定自体は可能ですが、グローバルにしか指定できません。そのため、すべての woff2 ファイルに同一の font-display 設定が適用されてしまいます。

5. woff2 ファイルの最終的な配置場所が特定できません。そのため、最も重要なフォントをpreloadできません。その結果、フォントファイルのダウンロードキューへの登録が遅れ、FOUT（flash of unstyled text）による目に見える layout shift が発生しやすくなります。詳細については、Webフォント読み込み中もテキストを表示し続ける方法をご覧ください。

6. フォントファイルを一切制御できません。追加でサブセット化することも、長期のキャッシュヘッダーを設定することも、自前のCDNから配信することもできません。

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Google Fontsをセルフホストするメリット

Google Fontsのセルフホストとは、Googleの外部サーバーに頼る代わりに、自前のサーバーからフォントファイルを配信することです。この手法には、いくつかのメリットがあります：

1. フォント配信速度の向上：外部サーバーへの依存を減らすことで、フォント配信が高速化します。その結果、テキストコンテンツのレンダリングも早くなります。最大のテキスト要素が素早く表示されるため、LCPの改善につながります。2025 Web Almanacのデータでも、セルフホストの増加傾向が示されています。デスクトップサイトの31.5%がフォントを完全にセルフホストしており、2024年の28%から増加しています。

2. layout shift の抑制：Google Fontsをセルフホストすれば、フォントの読み込みや表示方法を制御できるため、描画の遅延に伴う layout shift を最小限に抑えられます。これによりWebページ全体の視覚的な安定性が向上し、CLSの改善につながります。

3. キャッシュと preload の完全な制御：セルフホストなら、各フォントファイルの正確なURLが分かります。そのため、重要なフォントをpreloadし、長期のキャッシュヘッダーを設定（1年以上）して、ページの他のリソースと同じ接続でフォントを配信できます。

GDPRへの準拠

2022年1月、ミュンヘン地方裁判所は、同意なしに訪問者のIPアドレスをGoogleに送信しているとして、GoogleのサーバーからGoogle Fontsを読み込む行為はGDPR違反にあたるという判決を下しました。セルフホストをすれば、フォント読み込み時にGoogleへデータが一切送信されないため、この問題は完全に解消します。ヨーロッパからの訪問者がいるサイトなら、これもセルフホストすべき大きな理由になります。

Google Fontsをセルフホストする際のベストプラクティス

セルフホストしたGoogle Fontsを最適化してCore Web Vitalsを改善するには、次のベストプラクティスを実践してください：

1. WOFF2 形式のみを使用する：WOFF2は最も圧縮率が高く（WOFFより約30%軽量）、96%以上のブラウザが対応しています。WOFF2に対応していない唯一のブラウザはInternet Explorerですが、2022年6月にサポートが終了しています。もはや WOFF の fallback は不要です。

2. フォントのサブセット化：ファイルサイズをさらに削減するには、Webページのコンテンツに必要な文字のみを含めるサブセット化を行います。フォントの読み込みが高速化し、Core Web Vitalsの改善につながります。Google Fontsはすでに unicode-range ごとにサブセット化されていますが、セルフホストならfonttoolsなどのツールを使ってさらに踏み込んだ削減が可能です。

3. font-display 属性の戦略的な活用：font-display 属性を戦略的に設定し、フォント読み込み中のテキスト描画を制御します。「swap」を指定すると、Webフォントが完全に読み込まれるまで fallback フォントが表示されるため、First Contentful Paintが早くなります。「optional」を指定すると、フォントの切り替えが完全にスキップされ、fallback フォントが差し替わらないため layout shift を防ぐことができます。この2つを適切に使い分ければ、Cumulative Layout Shift と First Contentful Paint の双方を最適化できます。2025 Web Almanacによると、現在50%のページで font-display: swap が使われていますが、font-display: optional の使用率はわずか0.5%にとどまります。しかし、重要度の低いフォントでCWVのパフォーマンスを最大化するには、optional が最も適した選択肢です。

4. フォントの preload：link preload を活用し、最も重要なフォント（最大1〜2個）をpreloadして可能な限り早期に利用できるようにします。同一オリジンのフォントであっても、必ず crossorigin 属性を指定してください。指定を忘れると、ブラウザがフォントを2回ダウンロードしてしまいます。フォントをpreloadしているページはわずか12%にとどまるため、手軽に成果を出せる施策です。

<link rel="preload" as="font" href="/fonts/inter-400.woff2" type="font/woff2" crossorigin>

Google Fontsをセルフホストする手順（正しい方法）

Google Fontsのダウンロードとセルフホストの作業は、10分程度で完了します。利用する前に、フォントのライセンスを必ず確認してください。ほとんどのGoogle FontsはSIL Open Font Licenseで提供されており、商用利用を含めて無料で使用できます。

最も手軽なのはgoogle-webfonts-helperを使う方法です。任意のGoogle Fontsを、すぐに使えるCSSとセットになったWOFF2ファイルとしてダウンロードできます。内部で何が起きているかを正確に理解するために手動で行いたい場合は、次の手順に従ってください：

1. fonts.google.com のGoogle Fontsウェブサイトにアクセスします。

2. 使用したいフォントを選び、必要なフォントウェイトを選択します。

3. フォントページのトップバーにある「selected families」ボタンをクリックします。そこにGoogleがホストするスタイルシートへのリンクが表示されます。

   

4. このスタイルシートのURLをコピーし、ブラウザで開きます。そのフォントで利用可能なすべての font-face 宣言が表示されます。

   

5. 1つのフォントしか選んでいないのに、woff2 ファイルが複数あることに気づくかもしれません。これは、unicode-range ごとに異なるフォントファイルが存在するためです。実際にどのフォントをダウンロードすべきか確認するため、GoogleがホストするスタイルシートをWebサイトに一時的に追加します。ショートカットの Ctrl-Shift-I で Chrome DevTools を開きます。[Network] タブへ移動して [Font] をクリックしてください。ページをリロード（Ctrl-R）すると、ダウンロードされたフォントが確認できます。

6. このフォントファイル名と、スタイルシート内の対応する woff2 ファイルを照合します。これで、サイトで実際に使用されているフォントファイルが特定できました。

7. 次に、フォントの完全なURLをコピーし、ブラウザで開きます。これでフォントファイルがダウンロードされます。このファイルをWebサイトに配置します。

8. ステップ7で使用したWebフォントのCSSをコピーし、自身のスタイルシートに貼り付けます。この際、URLをGoogle CDNから自前サーバーのもの（例：'/fonts/inter-400.woff2'）へ変更するのを忘れないでください。

9. フォントを preload します（視覚的に重要なフォントの場合）。

これで、選択したGoogle Fontsのダウンロードとセルフホストは完了です。

具体的な実装例

以下は、すべてのベストプラクティス（preloadの適用、WOFF2のみの使用、戦略的なfont-displayの設定、システムフォントのfallback）を適用したInterフォントの完全な実装例です。

<head>
  <title>Self-Hosted Google Fonts</title>
  <!-- preload the font (crossorigin is required, even for same-origin fonts) -->
  <link rel="preload" as="font" href="/fonts/inter-400.woff2" type="font/woff2" crossorigin>
  <style>
    /* Self-hosted Inter font with WOFF2 format */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      src: url('/fonts/inter-400.woff2') format('woff2');
      font-display: optional;
    }

    /* Fallback to system-ui font */
    body {
      font-family: 'Inter', system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This page uses Inter with a system-ui fallback.</p>
</body>

改善効果を計測する

フォントをセルフホストへ移行した後は、Real User Monitoringで改善効果を検証してください。CoreDashのデータによると、適切なpreloadを行ってフォントをセルフホストしているサイトは、Google Fonts CDNから読み込む場合と比べてLCPが中央値で180ms改善しています。変更が正しく機能しているか確認するため、LCP、CLS、FCP の推移を継続して追跡してください。