この記事の要点

WOFF2（Web Open Font Format 2.0）は 2014 年に Google が中心となって設計し、2018 年に W3C 勧告 となった Web フォント形式 拡張子は .woff2。圧縮アルゴリズムを zlib から Brotli に変更し、さらに glyf テーブル専用の前処理（transform）でグリフ情報を整列圧縮 元の TTF と比べて 約 30% のサイズ（70% 削減）。WOFF 1.0 比でも 30% 程度小さくなる 2026 年現在、Web フォントの事実上の標準。Google Fonts / Adobe Fonts のデフォルト配信形式 ブラウザ対応：Chrome 36+ / Firefox 39+ / Safari 10+ / Edge 14+ / Opera 23+。IE は非対応 なので WOFF フォールバックが必要だった CSS は @font-face の src に format("woff2") で指定。font-display: swap と組み合わせるのが定石 IANA 登録 MIME タイプ：font/woff2（RFC 8081, 2017）

概要

WOFF2（Web Open Font Format 2.0）は、2014 年に Google が中心となって策定し、2018 年 3 月に W3C 勧告として標準化された次世代の Web フォント形式です。WOFF 1.0 の登場（2012 年勧告）からわずか数年で後継規格が必要とされた背景には、Web フォント、特に日本語のような 大規模 CJK フォント の配信負荷が深刻な問題になっていたことがあります。「もっと圧縮率を上げ、もっと早く描画したい」という要望に応えるため、圧縮アルゴリズムと内部構造の両面で大幅にアップデートされたのが WOFF2 です。

WOFF2 の最大の改良点は Brotli 圧縮 の採用です。Brotli は Google が 2015 年に公開した汎用圧縮アルゴリズムで、Deflate（zlib）より一般に 20〜26% 圧縮率が高く、Web コンテンツや辞書ベースのデータで特に効果を発揮します。さらに WOFF2 は glyf テーブルに対して専用の前処理（transform）を行い、グリフごとに散らばっていた座標データを再構成して圧縮効率を最大化します。結果として、元の TTF と比べて 約 30% のサイズ（つまり 70% 削減）まで縮みます。日本語フォントのような巨大ファイルでこの差は決定的です。

2026 年現在、WOFF2 は Web フォントの事実上の標準です。Google Fonts、Adobe Fonts、Fontsource、Cloudflare Fonts などのフォント配信サービスはほぼ例外なく WOFF2 をデフォルト出力としています。ブラウザ対応も Chrome 36（2014 年 7 月）以降・Firefox 39・Safari 10・Edge 14 と非常に幅広く、IE 以外のすべての主要ブラウザが対応しています。IE のサポートが事実上終了した 2022 年以降は、WOFF1 フォールバックすら省略するサイトが大半になりました。

用途は Web フォント一択です。@font-face の src に format("woff2") を指定して読み込み、必要に応じて unicode-range でサブセット分割、font-display: swap でフォールバック挙動を制御する、というのが現代的なベストプラクティスです。

内部構造と圧縮

セクション	役割
WOFF2 ヘッダ	マジック wOF2、テーブル数、圧縮後／前サイズ、メタデータオフセット
テーブルディレクトリ	各テーブルの種類・元サイズ・transform 有無
圧縮ストリーム	全テーブルを連結し Brotli で一括圧縮（WOFF1 はテーブル毎 zlib）
メタデータ / プライベートデータ	XML 形式メタ（任意）、独自データ領域

WOFF1 がテーブル単位で zlib 圧縮していたのに対し、WOFF2 はすべてのテーブルを連結してから Brotli で一括圧縮します。テーブル間の重複データが共通辞書として圧縮されるため、圧縮率が格段に向上します。

さらに glyf テーブルには専用の transform 処理があり、輪郭点・命令・フラグなどを別々のストリームに並べ替えてから圧縮します。これがフォント特有のデータパターンに最適化された圧縮を可能にしています。

主な用途と CSS 設定

現代の Web フォント配信の典型的な CSS はこうなります。

/* 1. preload で初期表示を速くする (HTML 側) */
<link rel="preload" href="/fonts/InterVar.woff2"
      as="font" type="font/woff2" crossorigin>

/* 2. CSS で読み込み (WOFF2 単体配信) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;     /* 可変フォントの場合は範囲指定 */
  font-display: swap;
  src: url("/fonts/InterVar.woff2") format("woff2-variations");
}

/* 3. CJK は unicode-range でサブセット分割 */
@font-face {
  font-family: "Noto Sans JP";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/NotoSansJP-400-jp.woff2") format("woff2");
  unicode-range: U+3000-9FFF, U+FF00-FFEF;
}

@font-face {
  font-family: "Noto Sans JP";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/NotoSansJP-400-latin.woff2") format("woff2");
  unicode-range: U+0000-007F;
}

Google Fonts の配信 CSS を見ると、まさにこの unicode-range による細かなサブセット分割が大量に行われています。ブラウザは実際に使われている文字のサブセットだけをダウンロードするため、無駄が極限まで削られます。

関連形式との比較

項目	WOFF2	WOFF 1.0	TTF / OTF 直配信
圧縮	Brotli + glyf transform	zlib（テーブル毎）	なし
サイズ（TTF 比）	約 30%	約 50%	100%
勧告年	2018	2012	—
ブラウザ対応	モダン全（IE 非対応）	IE9+ / 主要全	全
format() 指定	woff2 / woff2-variations	woff	truetype / opentype
2026 年の立ち位置	事実上の標準	レガシーフォールバック	非推奨

編集ツール（変換）

• woff2_compress / woff2_decompress（Google 公式 C++ CLI）：TTF/OTF ↔ WOFF2 の双方向変換。サーバー側自動化に最適。
• fonttools（Python）：fonttools ttLib.woff2.compress / decompress。pyftsubset でサブセット化も同時に行える。
• Transfonter / FontSquirrel（Web）：GUI でアップロードするだけ。手軽。
• Cloudflare / Vercel の自動最適化：CDN がフォントを WOFF2 に自動変換するケースもある。

注意点・落とし穴

• preload と crossorigin：<link rel="preload"> でフォントを先読みする際は crossorigin 属性が必須。これを忘れるとブラウザが二度ダウンロードする。
• CDN の MIME タイプ：font/woff2 を返さない CDN だと一部ブラウザが警告。S3 等は Content-Type を手動設定。
• IE 対応は完全に放棄してよい：2026 年現在、IE 用 WOFF1 フォールバックを書く必要はほぼない。書くとそのぶんビルド・配信が複雑化する。
• FOIT / FOUT 制御：font-display: swap が初期表示の体感速度に最も寄与する。optional は読み込みに時間がかかる場合にフォールバックで確定させる積極策。
• サブセット化を必ず：可変フォントや日本語フォントは「サブセット化済み + WOFF2」でようやく現実的サイズ。生 TTF を WOFF2 化しただけでは不十分なことが多い。
• ライセンス：WOFF2 化しても元フォントの EULA は引き継がれる。Web 配信権が EULA で許諾されているか必ず確認。

関連リンク

• フォント（親カテゴリ）
• ファイル拡張子とは（概論）
• TTF（.ttf）
• OTF（.otf）
• WOFF（.woff）
• EOT（.eot）
• CSS（.css）