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

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

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

Lighthouse では、非表示のテキストをフラッシュする可能性のあるフォント URL にフラグが付けられます。

Lighthouse におけるウェブフォントの読み込み時にテキストの表示が維持されることを示すスクリーンショット

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

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

リソース