フォントを迅速に配信することは非常に重要です。フォント配信を高速化すると、テキストが早く表示されるだけでなく、フォントがレイアウト シフトを引き起こすかどうかにも大きく影響します。必要になる前にフォントを配信できない場合、通常はフォントがスワップされたときにレイアウト シフトが発生します。このレイアウト シフトのサイズは、代替フォントがウェブフォントにどの程度一致するかによって異なります。この現象の実際の動作を確認するには、このデモを表示して、高速接続と低速接続で生じるレイアウト シフトを比較してください。
次の例では、サードパーティ フォントをできるだけ早く読み込むために、インライン フォント宣言と preconnect リソースヒントを使用する 2 つのパフォーマンス手法を組み合わせています。このコード スニペットは Google Fonts からフォントを読み込む方法を示していますが、他のサードパーティ フォント プロバイダにもこの手法を適用できます。
インライン フォント宣言:
font-family宣言をメイン ドキュメントでインライン化することで、この情報を外部スタイルシートに含めるのではなく、ブラウザが別のスタイルシート ファイルがダウンロードされるのを待たずに、ページで使用するフォント ファイルを決定できます。通常、ブラウザはフォント ファイルがページで使用されていると認識するまでダウンロードしないため、これは重要です。ほとんどの場合、フォントの読み込みにはpreloadを使用するよりも、インライン フォント宣言を使用することをおすすめします。事前接続: Google Fonts を読み込む場合は、
<link>タグをpreconnectリソースヒントと組み合わせて使用することをおすすめします。preconnectリソースヒントは、サードパーティの送信元との早期接続を確立します。以下のコード スニペットでは、1 つ目のリソースヒントでフォント スタイルシートをダウンロードするための接続を、2 つ目のリソースヒントでフォント ファイルをダウンロードするための接続を設定しています。
例:
HTML
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
<style>
body {
font-family: system-ui;
font-size: 1em;
}
h1 {
font-family: 'Zen Tokyo Zoo', sans-serif;
font-size: 3em;
}
</style>
</head>