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

フォントは多くの場合、読み込みに時間がかかる大きなファイルです。一部のブラウザでは、フォントが読み込まれるまでテキストが非表示になり、不可視テキストのフラッシュ（FOIT）が発生します。

Lighthouse のフォント表示監査が不合格になる仕組み

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 を指定します。

リソース