フォントの読み込み中にテキストが非表示されることを避ける
なぜこの点を配慮する必要がありますか？ #
フォントは普段、大きなファイルで読み込みに時間がかかります。これに対処するために、一部のブラウザは、フォントが読み込まれるまでテキストを非表示にします（非表示のテキストのフラッシュ）。パフォーマンスを最適化する目的で、「非表示のテキストのフラッシュ」を避けて、（スタイルのないテキストのフラッシュ）システムフォントを使用してユーザーにすぐにコンテンツを表示することを希望するかもしれません。
すぐにテキストを表示する #
このガイドでは、これを実現する2つの方法を説明します。最初のアプローチは非常に簡単ですが、ユニバーサルブラウザがサポートしてもらいません。 2番目のアプローチはより多くの作業が必要ですが、ブラウザが完全にサポートしてもらいます。最良の選択は、実際に実装して維持するものです。
オプション＃1：font-displayを使用する #
font-displayは、フォント表示戦略を指定するためのAPIです。 swapは、システムフォントを使用して、このフォントを使用するテキストがすぐに表示される必要があるようとブラウザに通知します。カスタムフォントの準備ができたら、システムフォントが交換されます。
ブラウザはfont-displayサポートしていない場合、フォントの読み込みのためのデフォルトの動作にフローし続けます。こちらでfont-displayサポートしているブラウザを確認してください。
下記は、一般的なブラウザのデフォルトのフォント読み込み動作です。
オプション＃2：カスタムフォントが読み込まれる後の使用を待機する #
もう少し作業を行うことで、すべてのブラウザで機能するように同じ動作を実装できます。
このアプローチには3つの部分があります。
- 最初のページ読み込み時にカスタムフォントを使用しないでください。これにより、ブラウザはシステムフォントを使用してテキストをすぐに表示できます。
- カスタムフォントが読み込まれる時点を検出します。これは、FontFaceObserverライブラリのおかげで、数行のJavaScriptコードで実現できます。
- カスタムフォントを使用できようにページスタイルを更新します。
これを実装するために実施する必要である変更は次のとおりです。
- 最初のページの読み込み時にカスタムフォントを使用しないように、CSSをリファクタリングすること。
- ページにスクリプトを追加すること。このスクリプトでは、カスタムフォントが読み込まれたことを検出して、ページのスタイルを更新します。
確認 #
Lighthouseの実行により、サイトがテキストを表示するためにfont-display: swapを使用していることを確認できます。
- Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
- Click the Lighthouse tab.
- Make sure the Performance checkbox is selected in the Categories list.
- Click the Generate report button.
Webフォントの読み込み監査に合格したら、テキストが表示されたままであることを確認します。