Web レンダリングにおけるフォントの読み込み遅延を効果的に軽減する

@font-face を使用したカスタム フォントの埋め込みは Web デザインでは一般的な方法ですが、ちらつき効果が発生する可能性があります。テキストは最初はデフォルトのシステム フォントで表示され、完了するとカスタム フォントに切り替わります。この望ましくない遅延は、フォント ファイルの非同期読み込みによって発生します。

「プリロード」によるプリエンプティブ フォント ロード

この遅延を最小限に抑えるための業界標準のソリューションは、最新のブラウザ。この属性を使用すると、ブラウザはページのコンテンツをレンダリングする前にフォント ファイルの読み込みに優先順位を付けることができます。

プリロードを組み込むことで、指定したフォント ファイルの読み込みを非同期で開始するようにブラウザに指示でき、次の準備が整います。ページがテキストをレンダリングするリクエストを 1 回使用します。その結果、シームレスな移行が実現し、目に見える遅延なくカスタム フォントが適用されます。

たとえば、次のコード スニペットを考えてみましょう:

マスターのための追加リソース

このトピックについてさらに詳しく知りたい場合は、次のリソースを参照することをお勧めします:

• [使用できますか: link-rel- preload](https://caniuse.com/#feat=link-rel-preload)
• [rel=preload のドキュメント - MDN](https://developer.mozilla.org/en-US/docs/Glossary/Prefetch_and_preload)
• [Web フォントのプリロード ヒント - Bram Stein](https://bramstein.com/blog/ 2013/01/14/preload-hint-web-fonts/)