フォントフォールバックと CLS

中核的な Web バイタルのコンテキスト

カスタムフォント（すべてのブラウザーでデフォルトでは不明なフォント）を読み込むと、読み込み順序に遅延が生じたり、CLS （累積レイアウトシフト）の問題が発生したりする可能性が簡単にあります。 これは、フォントがブラウザーによってキャッシュされるまで、サイトに最初に読み込まれるページに対して当てはまります。

カスタムフォントをプリロードしたりプッシュしたりすることはできますが、ブラウザーがデフォルトのフォントで本文をレンダリングする場合は常にあります。 これは、低速なデバイスや低速な接続では特に当てはまります。 フォントが読み込まれるまで全身を非表示にできますが、FCP （First Contentful Paint）と LCP （Largest Contentful Paint）のスコアは大きなペナルティを受けます。

また、font-display: optional のような CSS のテクニックを使用することもできますが、低速の接続ではフォントがまったく読み込まれない場合があります。ブラウザーには、一定の（短い）遅延の後で無視する命令があります。

この最後の解決策では、CLS スコアの影響を防ぐことはできません。フォントを入れ替えると、コンテンツのサイズが変更され、レイアウトが「シフト」する場合があります。

これらの 2 つの問題（フォント読み込み遅延と CLS）を防ぐために使用できる別のメカニズムがあります。フォントのフォールバックを使用します。

フォントフォールバックの考え方は、ページのコンテンツに適用されたときに、コンテンツがフォントフォールバックとカスタムフォントで同じ「スペース」を使用するように、ブラウザーのデフォルトフォントを拡大縮小することです。 このように、レイアウトシフトを行わなくても、一方を他方と入れ替えることができます。 カスタムフォントに十分「似ている」デフォルトのフォントを使用する場合、初回のページ読み込みから数ミリ秒は、カスタムフォントで提供したいエクスペリエンスに実際に近い状態になります。 その後、カスタムフォントの読み込みを延期したり、少なくとも読み込みシーケンスでカスタムフォントをノンブロッキングにしたりできます。

フォントフォールバック拡張機能

フォントのフォールバックの計算に役立つ chrome 拡張機能を作成しました。

ページで拡張機能を開くと、そのページで使用されているフォントの書体が分析されます。フォントの書体は、フォントファミリーとフォントの太さを組み合わせたものです。 これで、これらのフォントの各面に対して、デフォルトのブラウザーフォントを選択し、フォントのフォールバック計算を実行できます。 拡張機能は、各フォント size-adjustment について、コンテンツの幅が両方のフォントで同じになるように、デフォルトのブラウザーフォントのうちどのフォントが必要かを計算します。
計算は幅でのみ行われます。高さは line-height で制御する必要があるからです。テキストの高さがフォントで決まらないように、サイトで line-height を設定する必要があります。 これは段落、見出し、リストに当てはまります…

注意：フォントキットでは、使用されていない（または現在のページ以外のサイトで使用されている）フォントの面が多数読み込まれる傾向があります。 また、拡張機能には、合計で読み込まれる数も表示されます。 また、最適化が可能な場合は良い指標です。フォントキットを最適化するフォント面を減らすことで、転送するバイト数を大幅に節約できます。

計算作業が完了したら、計算済み CSS をコピーして、メインの CSS に貼り付けることができます。

生成されたフォントファミリーは、CSS font-family のカスタムフォントの後に追加する必要があります。ブラウザーは最初はカスタムフォントを見つけることができません。後でカスタムフォントが読み込まれるまで、フォールバックを使用します。 同じスペースを使用するので、スワップによって CLS が生成されることはありません。

フォント調整値を微調整するには、シミュレーションパネルを使用することもできます。

このチェックボックスをオンにすると、カスタムフォントがページ内で直接計算されたフォールバックフォントに置き換えられます。 テキスト入力を使用すると、size-adjust 値を変更し、結果を直ちに視覚化できます（値を変更するたびにチェックボックスを切り替える必要があります）。

Edge ケース

拡張機能は、既存のコンテンツと CSS ルールを使用して、既存のサイトに基づいて計算を行います。 異なるコンテキストでは、size-adjust が完全に収まらず、フォントスワップによって引き続き CLS が生成される場合があります。

技術的な詳細やその他のツールは、拡張機能リポジトリに直接格納されています。https://github.com/adobe/helix-font-fallback-extension