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

PageSpeed InsightsでWebサイトを診断すると、「ウェブフォント読み込み中のテキストの表示」という警告が表示されることがあります。この記事では、なぜこの警告が出るのか・どう解決するかを手順つきで解説します。

「ウェブフォント読み込み中のテキストの表示」とは？

ホームページで使われる文字にはフォントの種類があります。フォントには大きく2種類あり、パソコンにインストールされているローカルフォントと、Web上からダウンロードして使うウェブフォントがあります。

ウェブフォントはデザインの自由度が高い反面、ページ読み込み時に外部サーバーからフォントファイルをダウンロードする必要があるため、表示に時間がかかることがあります。

「ウェブフォント読み込み中のテキストの表示」は、「フォントが読み込まれるまでの間、代替フォントを使ってテキストを先に表示してください」というPageSpeed Insightsからのアドバイスです。対応することでページの表示速度が体感的に向上します。

解決策はCSSの @font-face に font-display: swap; を追加することです。この1行を追加するだけで、ウェブフォント読み込み中にローカルフォントが代替表示されるようになります。

WordPressのテーマを使っている場合、テーマのCSSファイルに @font-face が記述されていることがあります。まずはテーマの style.css や子テーマのCSSファイルを検索して確認してください。

@font-face の記述はあるが font-display の指定がない場合は、以下のように font-display: swap; を1行追加するだけで完了です。

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

@font-face の記述がない場合は、以下のコードをCSSファイルに追加してください。

@font-face {
  font-family: "任意のフォント名";
  font-display: swap;
  src: url("ウェブフォントファイルのパス") format("フォーマット名");
}

各項目の意味は次のとおりです。

font-family：このフォントを参照するときの名前（任意でOK）
font-display: swap：読み込み中に代替フォントを表示する設定
src: url(…)：ウェブフォントファイルのパス。PageSpeed Insightsの画面で該当ファイルを右クリック→「リンクのアドレスをコピー」で取得できます

フォント名を設定したら、適用したい要素に font-family を指定します。

body {
  font-family: "任意のフォント名", sans-serif;
}

Google Fontsを利用している場合、読み込み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に &display=swap を追記してください。

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

表示速度の改善はSEOにも直結します。他のPageSpeed関連の改善方法もあわせて確認してみてください。