サイト表示速度

「ウェブフォント読み込み中のテキストの表示」をfont-display: swapで解決する方法

  • 登録：
  • 更新：

PageSpeed Insightsで「ウェブフォント読み込み中のテキストの表示」という項目が改善対象として挙げられたことはありませんか？原因はウェブフォントの読み込み方式にあり、CSSに1行追加するだけで解消できます。本記事では対処法を具体的なコードつきで説明します。

この警告が出る原因：ウェブフォントとFOIT問題

Webサイトで使用するフォントには、ユーザーのPCに最初からインストールされているシステムフォントと、外部サーバーから取得して表示するウェブフォントの2種類があります。

ウェブフォントはデザインの一貫性を保てる利点がありますが、ページ読み込みのたびに外部からファイルを取得するため、通信が完了するまでテキストが画面に表示されないことがあります。これをFOIT（Flash of Invisible Text）と呼びます。

PageSpeed Insightsが「ウェブフォント読み込み中のテキストの表示」を指摘するのは、まさにこのFOIT状態が発生しているサインです。フォントが届く前でも代替フォントでテキストを先出しすれば、ユーザーは内容をすぐに読み始められます。ウェブフォントの仕組みや影響についての詳細はこちらを参照してください。

PageSpeed Insightsでウェブフォント読み込み中のテキストの表示の警告が出ている画面

対処法：@font-faceにfont-display: swapを追加する

解決策はCSSの @font-face ルール内に font-display: swap; を1行追記することです。これを設定すると、ウェブフォントの取得が完了するまでの間、システムフォント（代替フォント）でテキストを表示してくれます。フォントが読み込まれたタイミングで自動的に切り替わります。

手順1：既存の@font-faceにswapを追記する

WordPressテーマを使用している場合、テーマの style.css や子テーマのCSSファイルに既に @font-face が書かれているケースがほとんどです。そのブロック内に font-display: swap; を1行加えます。

@font-face {
  font-family: "フォント名";
  font-display: swap; /* ← この1行を追加する */
  src: url("フォントのパス") format("woff2");
}

font-display の記述がすでに存在する場合は、値が auto や block になっていないか確認し、swap に変更してください。

手順2：@font-faceの記述がない場合は新規作成する

@font-face が存在しない場合は、下記のコードをCSSファイルへ追加します。フォントファイルのURLはPageSpeed Insightsの警告画面で対象ファイルを確認し、右クリック→「リンクのアドレスをコピー」で取得できます。

@font-face {
  font-family: "myFont";
  font-display: swap;
  src: url("ウェブフォントファイルのURL") format("woff2");
}

各プロパティの役割は以下のとおりです。

  • font-family：CSSから参照するときのフォント名（任意の文字列でOK）
  • font-display: swap：代替フォントで先表示し、読み込み後に切り替える設定
  • src: url(…)：ウェブフォントファイルの場所。woff2形式が最も圧縮効率が高い

@font-faceを作成したら、テキストに適用したい要素に font-family を指定します。

body {
  font-family: "myFont", sans-serif;
}
PageSpeed Insightsでウェブフォントファイルのパスをコピーする方法

Google Fontsを使っている場合の対応

Google Fontsを読み込んでいる場合は、CSSを直接編集しなくてもURLに &display=swap を追記するだけで対応できます。

/* 変更前 */
https://fonts.googleapis.com/css2?family=Noto+Sans+JP

/* 変更後 */
https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap

WordPressのfunctions.phpやテーマ設定からGoogle Fontsを読み込んでいる場合は、そのURL文字列を上記のように修正します。テーマによっては管理画面の「テーマオプション」や「カスタマイズ」からフォントURLを変更できる場合もあります。

swapを使う際のCLS（レイアウトシフト）への注意

font-display: swap は読み込み中も代替フォントでテキストを表示するため、ユーザー体験は向上します。ただし、ウェブフォントが後から切り替わる際にフォントのサイズや字幅が変わり、レイアウトがずれる「CLS（Cumulative Layout Shift）」が発生することがあります。

2025年現在、CLS改善のために size-adjust や ascent-override などの@font-faceディスクリプタを組み合わせる手法も注目されています。また、表示速度を最優先にする場合は font-display: optional を使う選択肢もあります（ただし読み込みが間に合わない場合はそのセッション中ウェブフォントが適用されません）。用途にあわせて検討してみてください。

まとめ

「ウェブフォント読み込み中のテキストの表示」の警告は、font-display: swap; を@font-faceに追加することで対処できます。対応後にPageSpeed Insightsを再スキャンすれば警告が消え、スコア向上にもつながります。

  • 既に@font-faceがあるなら font-display: swap; を1行追記するだけ
  • @font-faceがない場合はフォントパスを指定して新規作成する
  • Google Fontsなら読み込みURLに &display=swap を追記するだけで完了
  • CLS対策が必要なら size-adjust などの追加設定も検討する

表示速度の改善はSEOスコアにも影響します。PageSpeed Insightsのスコアを上げた4つの改善手順やTTFB（サーバー応答時間）の改善方法もあわせて参考にしてください。

このテーマの関連記事はこちら