自己ホスト型フォントとは、サードパーティのフォント プロバイダ（Google Fonts など）ではなく、自社のサーバーから提供されるフォント ファイルです。
フォントを迅速に配信することは非常に重要です。フォント配信を高速化すると、テキストが早く表示されるだけでなく、フォントがレイアウト シフトを引き起こすかどうかにも大きく影響します。必要になる前にフォントを配信できない場合、通常はフォントがスワップされたときにレイアウト シフトが発生します。このレイアウト シフトのサイズは、代替フォントがウェブフォントにどの程度一致するかによって異なります。この現象の実際の動作を確認するには、このデモを表示して、高速接続と低速接続で生じるレイアウト シフトを比較してください。
次の例では、自己ホスト型フォントをできるだけ早く配信するために、インライン フォント宣言と WOFF2 フォント形式という 2 つのパフォーマンス手法を組み合わせています。
インライン フォント宣言:
@font-face宣言とfont-family宣言をメイン ドキュメントでインライン化することで、この情報を外部スタイルシートに含めるのではなく、ブラウザが別のスタイルシート ファイルがダウンロードされるのを待たずにページで使用するフォント ファイルを決定できます。通常、ブラウザはフォント ファイルがページで使用されていると認識するまでダウンロードしないため、これは重要です。ほとんどの場合、フォントの読み込みにはpreloadを使用するよりも、インライン フォント宣言を使用することをおすすめします。WOFF2: 最新のフォント フォントの中で最も新しいのは WOFF2 です。WOFF2 は最新のフォントで、ブラウザのサポートも広く、圧縮率も最も優れています。Brotli を使用しているため、WOFF2 の圧縮率は WOFF の 30% です。
パフォーマンスをさらに改善するには、フォントのサブセット化の使用を検討してください。フォントのサブセット化は、フォント ファイルを小さなサブセットに分割する手法です。通常は、使用されていないグリフを削除することを目的としています。これにより、フォントのファイルサイズを大幅に削減できます。フォント サブセットを作成するためのツールには、fontkit、サブフォント、glyphhanger などがあります。
自己ホスト型フォントに関するおすすめの方法について詳しくは、自己ホスト型フォントの使用をご覧ください。
例:
HTML
<head>
<style>
@font-face {
font-family: 'Google Sans';
src: url("Google Sans.woff2") format('woff2');
font-display: swap;
}
body {
font-family: system-ui;
font-size: 1em;
}
h1 {
font-family: 'Google Sans', sans-serif;
font-size: 3em;
}
</style>
</head>