WOFF
Web Open Font Format——ウェブ専用に設計された初のフォント形式です。
WOFF とは？
WOFF 1.0 は Mozilla、Opera、Microsoft が共同開発した、ウェブのために一から構築された最初のフォント形式です。2012 年 12 月に W3C 勧告となり、ウェブタイポグラフィの重要なマイルストーンとなりました。
その核心は、既存の TrueType または OpenType フォントデータをラップすることです。zlib 圧縮を適用してファイルサイズを縮小し、ライセンスと帰属情報のためのオプションのメタデータフィールドを含んでいます。WOFF 以前は、ウェブ開発者は生の TTF や OTF ファイルを配信する必要がありました——大きく、非圧縮で、ライセンス情報を埋め込む標準的な方法もありませんでした。
核心的なイノベーションは、三つの問題を同時に解決する専用ウェブフォントコンテナの作成でした：圧縮によるファイルサイズの縮小、フォントライセンスのための標準メタデータブロック、そしてブラウザが容易に検証してサンドボックス化できるセキュアな形式です。
仕組み
WOFF コンテナは、既存のフォントテーブル（TTF または OTF ソースファイルから）をテーブルごとの zlib 圧縮でラップします。元のフォントの各テーブル——グリフのアウトライン、カーニングデータ、ネーミングレコード——は個別に圧縮されるため、ブラウザは必要なテーブルだけを解凍できます。
WOFF ヘッダーは 4 バイトのシグネチャ（wOFF）で始まり、続いてフォントの種類（ラップされたデータが TrueType か CFF かを示す）、圧縮後の総サイズ、オプションのメタデータブロックへのポインターが続きます。ブラウザはこのヘッダーを読み取り、個々のテーブルを元の形式に解凍し、再構築されたフォントデータをテキストレンダリングエンジンに渡します。
レンダリングエンジンの観点からは、解凍された WOFF ファイルは元の TTF や OTF とまったく同一です——圧縮は完全に透過的です。
典型的な @font-face の使用例@font-face {
font-family: 'MyIcons';
src: url('icons.woff2') format('woff2'),
url('icons.woff') format('woff');
}ブラウザは各 src エントリを順番に試します。現代のブラウザは WOFF2 ファイル（より小さく、より高速）を読み込みます。WOFF2 に対応していない古いブラウザは WOFF ファイルにフォールバックします。このカスケードアプローチにより、最大の互換性を保ちながら最適なパフォーマンスが得られます。
メリットとデメリット
- 良好な圧縮——生の TTF より約 40% 小さい
- IE 9 以降を含む幅広いサポート
- W3C 勧告（公式ウェブ標準）
- メタデータとライセンスのサポートを含む
- TTF または OTF からの変換が簡単
- 圧縮性能に優れる WOFF2 に取って代わられている
- 同等の WOFF2 ファイルより約 30% 大きい
- zlib 圧縮は Brotli より非効率
ブラウザサポート
WOFF は 2010 年代初頭からすべての主要ブラウザでサポートされており、ウェブフォントで最も安全なフォールバック形式です。Internet Explorer の古いバージョンもサポートするため、WOFF2 よりも広い範囲をカバーします。
| ブラウザ | 最低バージョン |
|---|---|
| Chrome | 6+ |
| Firefox | 3.5+ |
| Safari | 5.1+ |
| Internet Explorer | 9+ |
| Edge | すべてのバージョン |
| Opera | 11.1+ |
98%以上のグローバルブラウザカバレッジにより、WOFF は現役のほぼすべてのブラウザで対応しています。唯一注目すべき欠落は IE 6-8 で、代わりに EOT が必要です。
WOFF と WOFF2 の比較
WOFF2 は WOFF の後継であり、ほとんどの実用的な面で厳密な改善といえます。以下はその比較です：
| 比較項目 | WOFF | WOFF2 |
|---|---|---|
| 圧縮 | zlib (deflate) | Brotli |
| 圧縮率 | TTF より約 40% 小さい | WOFF より約 30% 小さい |
| 前処理 | なし | グリフデータ変換 |
| 解凍速度 | 速い | より速い |
| IE サポート | IE 9+ | Edge のみ（IE 非対応） |
| W3C 標準 | 2012 年 | 2018 年 |
WOFF2 は Brotli と特殊な前処理ステップにより、WOFF より約 30% 優れた圧縮率を実現しており、解凍も速いです。現代ブラウザの WOFF2 対応も同様に広く、唯一の欠落は WOFF をサポートするが WOFF2 はサポートしない IE 9-11 です。
2024 年以降のブラウザをターゲットとするほとんどのプロジェクトでは、WOFF2 のみで十分です。WOFF の唯一残る優位性は IE 9-11 のカバレッジです。
WOFF を使う場面
WOFF2 に取って代わられているとはいえ、フォントスタックに WOFF を含める正当な理由はまだあります：
- WOFF2 と並んだフォールバックとして——
@font-face宣言で WOFF2 を先頭に、WOFF を 2 番目に記載することで、現代ブラウザには小さなファイルを提供しながら、古いブラウザにも確実にフォントを届けられます。 - IE 11 サポートが必要な場合——IE 11 は WOFF をサポートしますが WOFF2 はサポートしません。WOFF がそのブラウザで利用できる最良の圧縮形式です。
- Brotli に対応していない環境——一部の古いビルドツール、プロキシ、CDN は WOFF2 の Brotli 圧縮を正しく処理できない場合があります。WOFF の zlib 圧縮はどこでもサポートされています。
これらがどれもプロジェクトに当てはまらない場合、WOFF を安全にスキップして WOFF2 のみを配信できます。