ルートごとにブラウザに課すフォント作業を減らす
ホームページ、コンバージョンページ、ログイン後の画面、および異なるデザインシステムを持つテンプレートでのコールドキャッシュ状態のフォント要求を棚卸しする。ファミリー、ウェイト、スタイル、ファイル、配信元、転送サイズ、セレクタを記録する。宣言された @font-face ルール自体がダウンロードを引き起こすわけではない；通常ブラウザは現在のレイアウトがそのフェイスを使用するときにのみ取得する。したがって未使用のグローバルなウェイトやスタイルはまず除去する価値がある。
実際にブランド価値をもたらす箇所ではカスタムタイプを使い、しばしば表示用の見出しに限る。デザインが許すなら本文はシステムフォントスタックにすることを検討する。可変フォント（variable font）が常に小さいとは限らない：複数の静的ファイルを置き換えられる反面、単一の静的フェイスより大きい場合もある。ルートが実際に要求する圧縮済みアセットを比較すること。
ルートレベルで使用がテストされていないファミリー、ウェイト、イタリック、アイコンフォントは除去する。
ビルドを変更する前に、ライセンスがウェブ配信、サブセット化、セルフホスティングを許可しているか確認する。
WOFF2 を使い、必要な文字を削らずにサブセット化する
モダンブラウザの基準として WOFF2 を出発点にする。W3C Recommendation は WOFF2 を圧縮が改善され高速に展開できるウェブフォントパッケージとして説明しており、主要なブラウザに実装されている。文書化されたレガシーブラウザの要件がある場合のみ別フォーマットを残し、そうでなければ良く設計されたフォールバックが安全な互換性の道である。
サブセット化は選択したグリフ（文字形状）だけを含む小さなファイルを作る。Unicode-range はサブセットを文字レンジに関連付けてブラウザがテキストに合ったファイルを選べるようにする。実際のページとサポートする言語（句読点、通貨、固有名、法的文言、ユーザー入力スクリプトを含む）からサブセットを作ること。欠けたグリフは正しさの問題であり、バイト削減の正当な代償ではない。
英語のデザインサンプルだけでなく、代表的なローカライズ済みページとフォーム入力でテストする。
各サブセットの unicode-range とウェイト／スタイル範囲が配備ファイルと一致することを保証する。
フォールバックと font-display ポリシーを一緒に設計する
フォールバックフォントはカスタムフェイスが準備できない場合にユーザーが見るものだ。見た目が似たものを選び、実際の見出し、複数行ボタン、ナビゲーション、テーブル、フォーム、長いローカライズ文字列で比較する。幅の違いは折り返しを変え、ascent・descent・line-gap の違いはブロックの高さを変える。どちらも既に表示されているコンテンツを移動させる可能性がある。
font-display はフェイスが利用できない間のレンダリング挙動を定義する。optional は極めて短いブロック期間とスワップ期間なしを持ち、初回訪問時に安定したフォールバックが望ましい本文に適することがある。swap はフォールバックを迅速に表示し後でウェブフォントに置き換えられるが、遅れての置換が破壊的なレイアウト変更を引き起こさない箇所だけで使う。block や fallback はグローバルなデフォルトであるべきではなく、検証済みのデザイン上の理由で使うべきだ。CSS の size-adjust はフォールバックのメトリクス調整に役立つが、対応するスクリプトとビューポートごとに視覚的に検証すること。
支払い、アカウント回復、アカウント、安全関連、ナビゲーションのテキストを遅いカスタムフォントに依存させない。
フォールバックで文字が表示されると誤った意味を伝えることがある。インターフェイス用の記号は一般に SVG アイコンの方が安全である。
発見（discovery）を改善するが、preload を抑制しデータフローを評価する
外部スタイルシート内で宣言されたフェイスは、そのスタイルシートがダウンロードとパースされた後に発見される場合がある。保守可能な初期クリティカル CSS は必要な宣言を早めに露出させられる；フォントバイナリをドキュメントにインライン化してはならない、ドキュメントを大きくするためだ。サードパーティ起点の場合、preconnect は接続を早く確立できる。フォント要求は CORS リソースであるため、クロスオリジン配信や preload は正しい crossorigin の取り扱いを必要とする。
preload は優先度の上書きであり万能の速度向上スイッチではない。ほかの重要作業と競合し得るし、ルートが必要としないフェイスをダウンロードすることもある；さらに unicode-range 選択を迂回する。遅い発見をまず修正し、証明された初回表示ファイルを一つだけ、正確な URL、as=font、crossorigin を使ってプリロードするに留める。Google Fonts は API リクエストに訪問者の IP アドレス、要求した URL、HTTP ヘッダ、リファラを含めると説明しており、クッキーを設定・ログにしない、収集情報をプロファイルやターゲティング広告に使わないとも述べている。セルフホスティングはそれらの読み込みについて Google へのデータ送信を止める。配信、プライバシー通知、管轄、契約を評価し、必要なら適格な助言を得ること。
コールドキャッシュのトレースを比較し、プリロードしたファイルがそのルートで消費されていることを確認する。
接続確立、キャッシュと CDN 能力、アセット保守、訪問者データの流れを天秤にかける。
フォントアセットをバージョン管理し、テスト済みの CSS フォールバック構成を保持する。
レンダリング挙動をテストし、フォントを復元力ある依存項目として運用する
コールドキャッシュで、ブラウザのネットワークツールを使い CSS→フォント要求のチェーン、タイミング、起点、キャッシュ、失敗を確認する。制約のある接続で繰り返し、次にフォントをスロットルまたはブロックする。成功の定義は、カスタムフェイスが適用される前でも読みやすいテキスト、使える操作体験、正確な記号、一貫したレイアウトがあることだ。現実的な狭い表示とデスクトップ表示、長い文字列、エラーメッセージ、同意文、価格表示、すべてのサポートスクリプトでテストする。
Chromium では Performance パネルでリロードを記録し Layout Shifts トラックを調べられる；DevTools は移動した要素を特定しシフトをアニメーションで示せる。フォント読み込みはよくある原因だが、移動した要素が必ずしも根本原因でないこともあるため、トレースとフォント適用を相関させること。Layout Instability API は Chromium に限定されるため、クロスブラウザの視覚チェックが重要である。リリースレビューにはフォントアセット、CORS 挙動、キャッシュポリシー、フォールバック、ロールバックを含める。意図した劣化モードは可読なテキストであって、空白や壊れたナビゲーションではない。
ウォームキャッシュは初回の要求とレンダリングの問題を隠す可能性がある。
ファイル、CMS の文言、テンプレート、プロバイダ、CDN ルールが変わったらチェックを繰り返す。