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

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

Lighthouse のフォント表示監査が失敗する仕組み

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

<ph type="x-smartling-placeholder">
</ph> 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 を指定します。

リソース