フォントの最適化: サブセット化、可変フォント、およびフォント表示
Web フォントは、パフォーマンスの最適化において見落とされがちな要素です。あ 最適化せずに Google Fonts を使用するサイトでは、300 KB ～ 800 KB の読み込みが発生する可能性があります フォントのみ - レンダリングをブロックし、LCP に影響を与え、レイアウトを引き起こすリソース フォント交換時のシフト。適切なテクニックを使えば、同じタイポグラフィーでも 必要なデータは 60KB 未満であり、目に見える変化は発生しません。
Web フォント市場は近年大きく変化しました。ザ 変数
フォント すべてのバリアント (標準、太字、斜体) を含めることができます。
4 つ以上の個別のファイルではなく、単一のファイルです。サブセット化するとファイルが削減されます
不要なグリフを削除します。そして戦略 font-display 許可する
ロード時のブラウザの動作を正確に制御します。
何を学ぶか
- WOFF2 の仕組みと、WOFF2 が Web に最適な形式である理由
- フォントのサブセット化: pyftsubset と Glyphhanger を使用してファイルを 400KB から 60KB に削減
- バリアブル フォント: すべてのバリエーションを 1 つのファイルで、40 ～ 60% 節約
- フォント表示戦略: スワップ、オプション、フォールバック、ブロック
- 必要なサブセットのみをロードする unicode-range
- FOIT (不可視テキストのフラッシュ) を排除するための事前接続とプリロード
- メトリック (@font-face) をオーバーライドして、フォント スワップによる CLS を削減します。
WOFF2: Web フォントの標準形式
WOFF2 (Web Open Font Format 2) は Brotli 圧縮を使用するため、 WOFF と比較して 30 ～ 50%、元の OTF/TTF 形式と比較して 60 ～ 70%。 ブラウザのサポートはユニバーサル (最新のブラウザの 100%) であるため、もう必要ありません 過去 5 年間のブラウザをターゲットとするサイトに WOFF または TTF フォールバックを提供します。
/* Configurazione @font-face moderna: solo WOFF2 */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Variable font: un unico file per tutti i pesi */
@font-face {
font-family: 'Inter Variable';
src: url('/fonts/inter-variable.woff2') format('woff2-variations');
font-weight: 100 900; /* range continuo */
font-style: normal;
font-display: swap;
}フォントのサブセット化: ファイルを必要最小限に減らす
Inter Regular のような完全なフォント ファイルには、約 2,400 のカバーグリフが含まれています 何百もの言語。サイトがイタリア語と英語のみの場合は、次のものが必要です。 グリフ数は 300 未満です。サブセット化すると、未使用のグリフがすべて削除され、 ファイルサイズが大幅に増加します。
pyftsubset によるサブセット化 (Python)
# Installa fonttools
pip install fonttools brotli
# Subset per Latin Extended (caratteri italiani inclusi)
pyftsubset Inter-Regular.ttf \
--output-file=inter-regular-subset.woff2 \
--flavor=woff2 \
--unicodes="U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, \
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, \
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
# Risultato tipico:
# Inter-Regular.ttf: 1.2MB (OTF originale)
# inter-regular-subset.woff2: ~52KB (riduzione del 95%)グリフハンガー: 分析と自動サブセット化
Glyphhanger はサイト (または静的 HTML) をスキャンし、最小限のサブセットを生成します 実際に使用される文字に基づいて:
# Installa
npm install -g glyphhanger
# Scansiona un sito e genera il subset per i font usati
glyphhanger https://tuosito.com --subset=/fonts/*.ttf --formats=woff2 --LATIN
# Scansiona file HTML locali
glyphhanger ./dist/**/*.html --subset=/fonts/*.ttf --formats=woff2unicode-range: 条件付きサブセット
物件 unicode-range in @font-face に指示します
ページにそのフォントが含まれている場合にのみ、ブラウザがそのフォント ファイルをダウンロードします。
ユニコードの範囲。これは、Google Fontsがサブセットを提供するために使用するメカニズムです
異なる言語を使用するユーザーとは異なります:
/* Subset Latin di base - scaricato per tutti */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-latin.woff2') format('woff2');
font-weight: 400;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* Subset Cirillico - scaricato solo se la pagina usa cirillico */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-cyrillic.woff2') format('woff2');
font-weight: 400;
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}バリアブル フォント: 1 つのファイルですべてのバリエーションを対応
可変フォント (OpenType 1.8 仕様で導入) では、単一のフォントを使用できます。 ファイルには、1 つ以上の変動軸に沿った一連の変動が含まれます。 最も一般的な軸は次のとおりです。
- 重量 (重量):100～900
- wdth (幅): 圧縮、標準、拡張
- イタリア (斜体): 直立体から斜体へ
- スラント (slant): 文字の傾き
- おっと (光学サイズ): さまざまなサイズに最適化
/* Variable font con asse weight */
@font-face {
font-family: 'Inter Variable';
src: url('/fonts/inter-variable.woff2') format('woff2-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* Uso di font-variation-settings per control granulare */
h1 {
font-family: 'Inter Variable', sans-serif;
font-weight: 700;
/* Oppure usando direttamente variation settings */
font-variation-settings: 'wght' 700, 'opsz' 32;
}
p {
font-family: 'Inter Variable', sans-serif;
font-weight: 400;
font-variation-settings: 'wght' 400, 'opsz' 16;
}
/* Animazione fluida del peso con variable fonts */
.title-animated {
font-family: 'Inter Variable', sans-serif;
transition: font-variation-settings 0.3s ease;
}
.title-animated:hover {
font-variation-settings: 'wght' 800;
}バリアブルフォントによる実質的な節約
| シナリオ | 従来のアプローチ | バリアブルフォント | 貯蓄 |
|---|---|---|---|
| 4 つのウェイト (400、500、600、700) | 4ファイル × 30KB = 120KB | 1ファイル＝48KB | 60% |
| 4 ウェイト + イタリック体 | 8ファイル × 30KB = 240KB | 1ファイル＝72KB | 70% |
| フルディスプレイフォント | 12ファイル = 360KB | 1～2ファイル = 90KB | 75% |
フォント表示戦略
物件 font-display ブラウザがどのように処理するかを制御します
Webフォント読み込み時のテキスト表示。の選択
適切な戦略は、FOIT (Flash of Invisible Text) と
FOUT (Flash of Unstyled Text)、および CLS および LCP への影響。
font-display: swap (最も一般的)
ブラウザはすぐにシステム フォント (FOUT) でテキストを表示し、それを置き換えます。 Web フォントが利用可能な場合は、それを使用します。 FOIT はありませんが、フォントの場合は CLS の可能性があります 彼らは異なる指標を持っています。ほとんどのサイトにとって正しい選択です。
font-display: オプション (パフォーマンスを最大化するため)
ブラウザではテキストがシステム フォントで表示されます。 Web フォントは次の場所にダウンロードされます。 バックグラウンドですが、非常に短い期間 (約 100 ミリ秒) で利用可能な場合にのみ使用されます。 接続が遅い場合、その接続中はシステム フォントが永久に使用されます。 セッション。 FOUT も CLS もありませんが、Web フォントは表示されない可能性があります 低速接続の場合。美しさよりもパフォーマンスが求められる現場に最適です。
font-display: フォールバック (妥協案)
ブラウザのブロック期間は非常に短く (約 100 ミリ秒)、その後フォールバックが表示されます。 3 秒以内に利用可能な場合にのみ、Web フォントに置き換えられます。 3秒後、 システム フォントはセッション全体にわたって残ります。 FOIT と FOUT は、視覚的なアイデンティティに強い影響を与えるフォントです。
戦略の視覚的な比較
| 戦略 | ブロック期間 | スワップ期間 | FOIT | FOUT/CLS |
|---|---|---|---|---|
| ブロック | 3s | 無限 | 高い | Si |
| スワップ | 0ミリ秒 | 無限 | No | Si |
| 後退する | 100ミリ秒 | 3s | 最小 | 限定 |
| オプション | 100ミリ秒 | 0ミリ秒 | 最小 | No |
| auto | ブラウザが決める | ブラウザが決める | 変数 | 変数 |
オーバーライド メトリックによる CLS フォント スワップの排除
原因となる CLS を排除するための最も効果的な手法 font-display: swap
フォールバック フォント メトリックを Web フォントのメトリックと調整します。 CSS プロパティ
size-adjust, ascent-override, descent-override
e line-gap-override これをミリメートル単位の精度で行うことができます。
/* Trova i valori corretti per Inter su Arial come fallback */
/* Metodo 1: Usa lo strumento Fallback Font Generator di Malte Ubl */
/* https://screenspan.net/fallback */
/* Metodo 2: Calcola manualmente le metriche */
/* Inter: UPM 2048, ascender 1984, descender -494, line-gap 0 */
/* Arial: UPM 2048, ascender 1854, descender -434, line-gap 67 */
@font-face {
font-family: 'Inter Fallback';
src: local('Arial');
/* size-adjust: rapporto tra le dimensioni complessive */
size-adjust: 107.64%;
/* Override delle metriche verticali */
ascent-override: 90.2%;
descent-override: 22.48%;
line-gap-override: 0%;
}
/* Usa sempre il fallback ottimizzato come secondo nella stack */
body {
font-family: 'Inter', 'Inter Fallback', Arial, sans-serif;
}サードパーティフォントの事前接続とプリロード
Google Fontsまたは他のサードパーティフォントCDN、DNSおよびTLS接続を使用する場合
これらのドメインに対しては、遅延が追加されます。指令 preconnect e
preload nella <head> このオーバーヘッドを削減します。
<!-- Per Google Fonts: preconnect ai domini necessari -->
<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=Inter:wght@400;700&display=swap"
rel="stylesheet">
<!-- Ancora meglio: self-hosting con preload diretto -->
<link
rel="preload"
href="/fonts/inter-variable.woff2"
as="font"
type="font/woff2"
crossorigin
>警告: プリロードを乱用しないでください。
プリロードはブラウザーにそのリソースを高い優先度でロードするように指示します。 重要な CSS および JavaScript リソースと競合します。プリロードのみを使用する スクロールせずに見える部分のメイン フォント — 通常は、本文のフォントです。 通常の体重。プリロードするフォントが多すぎると、パフォーマンスが低下する可能性があります それらを改善するのではなく、ページの一般的なものです。
セルフホスティングと Google フォント: 比較
セルフホスティングと Google Fonts のどちらを選択するかは、いくつかの要因によって決まります。セルフホスティング より高度な制御、より優れたパフォーマンスを提供し、サードパーティのサービスに依存しません。 Google Fonts は利便性とサイト間での共有キャッシュを提供します (ただし、後者は メリットはありますが、最新のブラウザーのプライバシー制限により減少します)。
パフォーマンスを最大化するには、可変フォントとカスタム サブセットを使用した自己ホスト そして最適な選択。あまり犠牲にせずに実装速度を高めるために パフォーマンス、適切な事前接続ディレクティブを備えた Google Fonts および許容可能なもの。
/* Pipeline completa per self-hosting ottimizzato:
1. Scarica i font originali (OTF/TTF) dal sito del font designer
2. Crea subset con pyftsubset per Latin + caratteri speciali necessari
3. Converti in WOFF2
4. Carica i file in /public/fonts/
5. Configura gli header HTTP per il caching long-term
*/
/* Nel server (es: nginx) */
location ~* \.(woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
add_header Access-Control-Allow-Origin "*";
}次のステップ
フォントの最適化をマスターしたら、CSS の新機能を探索する準備が整いました。 これにより、応答性の高いコンポーネントを構築する方法が変わります。次へ このシリーズの記事では、CSS コンテナ クエリ: 構築方法について詳しく説明しています。 コンテナのサイズではなくコンテナのサイズに反応するコンポーネント ビューポートを使用すると、応答性の高いユーティリティ クラスを使用したパターンが廃止されます。
結論
Web フォントの最適化は、最も大きな影響を与える介入の 1 つです。 パフォーマンスの最適化への取り組み。 400KBの非最適化フォントから始める そして、オーバーライドメトリクスを使用して60KBの可変フォントをサブセットして、 CLS は 1 回限りの作業を数時間必要としますが、LCP に比べて永続的な利点があります。 各訪問者の CLS と帯域幅。
2026 年の推奨戦略: WOFF2 でバリアブルフォントを使用したセルフホスティング、
Latin Extended のサブセット化、 font-display: swap オーバーライドメトリクスを使用
フォールバック フォントの場合は、e <link rel="preload"> のフォントについては、
テキストの本文。このセットアップでは、美観を損なうことなく本来のパフォーマンスを実現します。