ウェブフォントの読み込み時にテキストが表示されたままにする

フォントは、読み込み時間が遅い大きなファイルであることがよくあります。一部のブラウザでは、フォントが読み込まれるまでテキストが非表示になり、非表示テキストのフラッシュ（FOIT）が発生します。

Lighthouse の font-display 監査が失敗する仕組み

Lighthouse は、非表示のテキストが点滅する可能性のあるフォント URL をすべて検出します。

Lighthouse の [Web フォント読み込み中のテキストの表示] 監査のスクリーンショット

非表示のテキストが表示されないようにする方法

font-display API は、font-face スタイル内で使用されたときにフォントがどのように表示されるかを示します。次の font-display 値は、カスタム フォントの準備ができていない場合にシステム フォントを使用するようブラウザに指示します。

  • swap
  • optional
  • fallback

CSS の例

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

Google Fonts の例

Google Fonts の URL の末尾に &display=swap/&display=optional/&display=fallback パラメータを追加します。

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

遅延フォントによるレイアウト シフトを回避する方法

システム フォントを一時的に表示すると、FOIT がスタイルなしテキストのフラッシュ（FOUT）に置き換えられます。これにより、コンテンツのレンダリングが早まるため FCP と LCP が改善されますが、カスタム フォントが一時的なシステム フォントに置き換わる際に、FOIT と FOUT の両方が CLS に同じ影響を与えます。

フォントの読み込みによる CLS の影響は、font-display: optional と組み合わせてプリロードを使用することで軽減できます。ただし、プリロードを過度に使用すると、読み込み指標に悪影響を及ぼす可能性があります。フォントのプリロードによってパフォーマンスの低下が発生しないことを確認するため、A/B テストを実施することをおすすめします。

スタック固有のガイダンス

Drupal

テーマ内でカスタム フォントを定義する際に @font-display を指定します。

Magento

カスタム フォントを定義する際に @font-display を指定します。

リソース