1ファイルで全ウエイト
最もレバレッジの高い意思決定は、ファイル構成です。従来のファミリーはスタティックなインスタンスとして配信されます——レギュラー、イタリック、ボールド、ときにディスプレイ用カット——それぞれが個別のリクエストで、合計はゆうに300〜400KBに達します。バリアブルフォントなら、同じ範囲(多くの場合それ以上——100から900までのすべてのウエイト)を1ファイルで運べて、その重さはたいていスタティック2つ分に満たないのです。
ファイルが少ないということは、部分的な読み込みが起きる機会も少ないということです——ボールドのファイルだけが遅れて届くあいだ、本物のイタリックと偽のボールドが混在して表示される、という事故が起きません。しかもバリアブルファイルの追加軸は実用的です。小さな文字のためのオプティカルサイズ、ダークテーマのためのグレード——ペイロードではなく、機能です。
本気でサブセットする
たいていのフォントファイルの中身は、そのインターフェースが決して描画しない文字が大半を占めています。サブセット化——実際に使う文字体系と文字だけにファイルを切り詰めること——で、ラテン文字のフォントは日常的に半分になります。さらにunicode-rangeを使えば、広いカバレッジを前払いなしで保てます。ラテン基本サブセットと拡張サブセットを別々のフェイスとして宣言しておけば、ブラウザは該当する文字が現れたときにだけ拡張分をダウンロードします。pyftsubset/fonttoolsのようなツールを使えば、これは職人技ではなくビルドステップになります。WOFF2は言うまでもありません。2026年にそれ以外の形式を配信しているなら、まずそこから始めてください。
font-displayを正直に選ぶ
読み込みの挙動は、CSSの衣装をまとったプロダクト上の意思決定です。
blockは、フォントの読み込み中テキストを隠します。擁護できる場面はほぼありません——読者の時間を、ブランドの見栄と引き換えにしているのです。swapは、フォールバックを即座に表示し、フォントが届いたら切り替えます。読むための画面には正しい選択です——ただし、スワップの瞬間があなたの問題になります。それが次のセクションの主題です。optionalは、フォントがすでにキャッシュされている場合にだけ使います(おおよそ「即座か、永遠になしか」)。ウェブフォントを譲れない高パフォーマンスなアプリケーションにとって、これが正直な設定です——初回訪問はフォールバックで読んでもらい、以降の訪問ではブランド書体が表示され、レイアウトは一度もずれません。
スワップを不可視になるまで作り込む
swapを選んだなら、レイアウトシフトを消し去るのはあなたの仕事です。現代のツールキットは、これをほぼ完璧にやってのけます。ローカルのシステムフォントを土台にしたフォールバック用@font-faceを用意し、size-adjust、ascent-override、descent-overrideを調整して、フォールバックがウェブフォントと同じ空間を占めるようにするのです。テキストは調整済みのフォールバックで即座に描画され、ウェブフォントが届き、何も動かない。このサイトはまさにこれを実践しています——ディスプレイ書体のGeorgiaフォールバックはメトリクスを合わせてスケーリングされているため、スワップはレイアウトの変化ではなく、声色の変化になります。
仕上げは配信の衛生管理です。セルフホストすること(サードパーティのフォントCDNは、プライバシー上の疑問であり、不要な接続セットアップです)。決定的に重要な1ファイルをプリロードすること。そしてimmutableなキャッシュヘッダーを設定して、コストがユーザーひとりにつき生涯で一度しか支払われないようにすること。
本格的な本文書体のための完全な予算は、この方針でこうなります。プリロードされたバリアブルWOFF2が1つ、使用言語にサブセット済み、およそ40〜90KB、メトリクス互換のフォールバックを添えたswap、あるいは思い切ってoptional。これはたいていのヒーロー画像より安上がりです——そしてそれこそが、書体がそもそも満たすべきだった基準なのです。