フォントの読み込み中に非表示テキストを回避する

Katie Hempenius
Katie Hempenius
X
Barry Pollard

検討すべき理由

多くの場合、フォントは大きなファイルで、読み込みに時間がかかります。これに対処するために、一部のブラウザでは、フォントが読み込まれるまでテキストを非表示にします（「見えないテキストの点滅」）。

Largest Contentful Paint（LCP）は、テキストのレンダリングの待機が遅延することがあります。パフォーマンスを最適化する場合は、「視認できないテキストの点滅」を避ける必要があります。（FOIT）し、システム フォントを使用して即座にユーザーにコンテンツを表示することで、「スタイルが設定されていないテキストの一瞬」を生み出します。（FOUT）。

フォント表示に関するブラウザのデフォルト

一般的なブラウザでのデフォルトのフォント読み込み動作は次のとおりです。

ブラウザ フォントの準備ができていない場合のデフォルトの動作...
Chrome と Edge テキストは最大 3 秒間非表示になります。テキストの準備ができていない場合は、 フォントの準備が整うまでシステム フォントを使用し、その後フォントを入れ替えます。
Firefox テキストは最大 3 秒間非表示になります。テキストの準備ができていない場合は、 フォントの準備が整うまでシステム フォントを使用し、その後フォントを入れ替えます。
Safari フォントの準備が整うまでテキストを非表示にします。

テキストをすぐ表示する

このガイドでは、テキストをできるだけ早く表示する方法を 2 つ紹介します。1 つはシンプルで、優れたブラウザ サポートを使用する方法です。2 番目の方法は詳細なものですが、より多くのオプションを利用できる場合があります。ウェブサイトに最適な選択肢は要件によって異なります。

オプション 1: font-display を使用する

対応ブラウザ

  • Chrome: 60。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 58。 <ph type="x-smartling-placeholder">
  • Safari: 11.1。 <ph type="x-smartling-placeholder">

ソース

font-display は、フォントの表示戦略を指定するための API です。swap は、このフォントを使用するテキストがシステム フォントを使用してすぐに表示されるようにブラウザに指示します。カスタム フォントの準備ができたら、システム フォントはスワップアウトされます。

/* Before */
@font-face {
  font-family: Helvetica;
}

/* After */
@font-face {
  font-family: Helvetica;
  font-display: swap;
}

ブラウザが font-display をサポートしていない場合（最新のブラウザはすべてサポートしています）、ブラウザは引き続きデフォルトの動作に従ってフォントを読み込みます。

方法 2: カスタム フォントが読み込まれるまで待機する

対応ブラウザ

  • Chrome: 35。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 41。 <ph type="x-smartling-placeholder">
  • Safari: 10。 <ph type="x-smartling-placeholder">

ソース

作業量が増えると、よりカスタマイズされたアプローチも検討できます。

このアプローチは、次の 3 つの部分で構成されています。

  • 最初はカスタム フォントを使用しないように CSS をリファクタリングして、最初のページ読み込み時にカスタム フォントを使用しないでください。これにより、ブラウザはシステム フォントを使用してテキストをすぐに表示します。
  • CSS Font Loading API を使用してカスタム フォントの読み込みを検出する
  • カスタム フォントを使用するようにページのスタイル設定を更新します。
// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");

// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);

// Load the font
font.load();

// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
  // Update the CSS to use the fonts
});

これは、FontFaceObserver ライブラリで実現することもできます。このライブラリには、より簡単な API もあります。

<ph type="x-smartling-placeholder">

これにより、フォントを読み込む際に、いくつかの追加事項を考慮できるようになります。たとえば、すべてのフォントを一度に読み込むことができ、各フォントを読み込むときに複数のレイアウトを回避できます。また、遅い接続のユーザーや、[データを保存] オプションを使用しているユーザーに対して、フォントを読み込まないように指定しているサイトもあります。

確認

Lighthouse を実行し、サイトで font-display: swap を使用してテキストを表示していることを確認します。

  1. Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
  2. [Lighthouse] タブをクリックします。
  3. [カテゴリ] リストで [パフォーマンス] がオンになっていることを確認します。
  4. [Generate report] ボタンをクリックします。

ウェブフォントの読み込み中もテキストを表示したままにするの監査に合格していることを確認します。