WOFF2

WOFF2 は Google が開発し、2018 年 3 月に W3C 勧告となりました。元の WOFF のコンセプトを発展させ、zlib 圧縮を Brotli——同じく Google が開発した圧縮アルゴリズム——に置き換え、大幅に優れた圧縮率を実現しています。

しかし WOFF2 は単なる「圧縮が優れた WOFF」ではありません。圧縮前にフォントデータを再構成して大幅に圧縮しやすくする前処理変換を導入しています。TrueType アウトラインに対しては、グリフの座標に予測コーディングを適用します——各点を絶対座標ではなく予測値からの差分としてエンコードします。結果として、Brotli が積極的に圧縮できる、はるかに冗長なバイトストリームが生成されます。

ドメイン固有の前処理に汎用圧縮を組み合わせるこの二段階アプローチが、WOFF2 があらゆる形式の中で一貫して最小のフォントファイルを生成できる理由です。

WOFF2 はソースフォントデータに二フェーズ圧縮パイプラインを適用します：

• フェーズ 1：前処理変換——フォント固有の変換がデータを再構成して圧縮性を最大化します。TrueType グリフアウトラインでは、座標の予測コーディングを使用します——各点は予測位置からの差分としてエンコードされ、より小さな数値が生成されます。他のフォントテーブルにも同様の変換が適用されます。
• フェーズ 2：Brotli 圧縮——前処理されたデータを Brotli で圧縮します。Brotli は LZ77 スライディングウィンドウ圧縮、ハフマンコーディング、内蔵静的辞書を組み合わせ、標準的なフォントデータで zlib より 20〜30% 優れた圧縮を実現します。

ブラウザ側では逆のプロセスが行われます：Brotli 解凍の後、逆変換で元のフォントテーブルを再構成します。追加のステップにもかかわらず、WOFF2 の解凍は実際には WOFF1 より高速です——Brotli は高速デコードのために設計されており、小さなファイルはネットワーク上での転送も速いからです。

@font-face {
  font-family: 'MyIcons';
  src: url('icons.woff2') format('woff2');
  font-display: swap;
}

.icon { font-family: 'MyIcons'; }
.icon-home::before { content: '\E001'; }

単一の src——WOFF2 のみ——を指定している点に注目してください。97%以上のブラウザカバレッジがあれば、多くの現代プロジェクトではフォールバック形式は不要です。font-display: swap ディレクティブは、アイコンフォントが読み込まれる間、ブラウザにフォールバックフォントで即座にテキストを表示するよう指示し、テキストが見えない状態を防ぎます。

WOFF2 はすべての現代ブラウザで幅広くサポートされています。唯一の重要な欠落は、2022 年 6 月に Microsoft によって廃止された Internet Explorer です。

グローバルの総カバレッジは約 97% です。残りの約 3% はほぼすべてレガシー IE インストールと非常に古いモバイルブラウザで構成されています。

WOFF2 の圧縮優位性を示すため、200 グリフを含むアイコンフォントの典型的なファイルサイズを示します：

節約量はアイコンセットが大きくなるほど積み重なります。500 グリフのフォントは TTF で 200 KB、WOFF で 120 KB、WOFF2 では 82 KB 程度になることがあります。何千ものページビューを経て、このキロバイトの差が直接、より速い描画時間と低い帯域幅コストに直結します。

常に。ウェブベースのアイコンフォントの展開では、WOFF2 がデフォルトの形式であるべきです。最小のファイルサイズ、最速の解凍、ほぼ全面的なブラウザサポートを提供します。

WOFF2 を使わない唯一のシナリオは Internet Explorer をターゲットにしている場合で、その場合は WOFF をフォールバックとしてペアにしてください：

@font-face {
  font-family: 'MyIcons';
  src: url('icons.woff2') format('woff2'),
       url('icons.woff') format('woff');
  font-display: swap;
}

現代のブラウザは WOFF2 ファイルを取得し、IE 11 は WOFF にフォールバックします。すべてのユーザーがフォントを受け取り、すべてのユーザーが圧縮版を受け取ります。