search

Found

info 概要

.woff2 をブラウザ内で base64 化し、src: url(data:font/woff2;base64,…) 付き @font-face を完成形 CSS で出力。フォント用 HTTP 1 本の削減に最適。

📘 使い方

  1. .woff2 ファイルをドロップ欄に投入するか、クリックして選択する
  2. font-family / font-weight / font-style / font-display を指定する
  3. 生成された @font-face CSS を出力欄で確認する

WOFF2 Base64 埋め込みジェネレーター

grid_view 関連ツール

Article

WOFF2 Base64 埋め込みジェネレーター | フォント用 HTTP リクエストを 1 本削減

self-host した .woff2 を @font-face 経由で読み込むと、CSS 解析の後にもう 1 本フォント用 HTTP が走ります。base64 化して src: url(data:font/woff2;base64,…) の形で CSS にインライン化すれば、追加リクエストはゼロになり、フォント未到着時の FOUT (Flash of Unstyled Text) も発生しません。

このツールは .woff2 をローカルで base64 エンコードし、font-family / font-weight / font-style / font-display の 4 設定込みの @font-face ブロックをコピペできる形で出力します。元バイト数と base64 化後バイト数を比較表示し、100 KB を超えたら警告も出します。

💡 このツールについて

「CDN ホスティング型 Web フォント (Google Fonts / Adobe Fonts) は GDPR の観点から self-host に寄せたいが、@font-face の追加リクエストが Lighthouse の Eliminate render-blocking resources で引っかかる」という典型的なジレンマを、CSS インライン化で解消するためのツールです。

CLI で base64 -i font.woff2 を叩き、出力を手動で @font-face に貼って format('woff2') 付きの src を組み立てる、という手間を毎回ファイル更新時に繰り返さなくて済むようにします。font-family 名にシングルクォートが含まれていれば自動で \' にエスケープされるため、Web 系日本語フォント (Noto Sans JP / M PLUS 1p / IBM Plex Sans JP / Zen Maru Gothic 等) の長い名称もそのまま貼って大丈夫です。

🧐 よくある質問

Q. 100 KB を超える .woff2 はインライン化しないほうがいい？ A. 一般論として、Critical CSS に含めるフォントは 50〜100 KB が現実的な上限です。FCP (First Contentful Paint) を改善する目的のはずが、インライン化した CSS バンドル自体が肥大化して逆効果になります。ツールは 100 KB 超で警告を出すので、それを超える場合は unicode-range でサブセット化するか、従来通り外部 url() 参照に戻して preload する判断ができます。

Q. base64 化するとファイルサイズが増えると聞いたけど？ A. 約 33% 増えます。raw 60 KB の .woff2 なら base64 後は約 80 KB。Brotli / gzip 圧縮を CSS に効かせれば実通信量は 10〜15% 増まで抑えられますが、それでも増えることに変わりはありません。サイズ表示で raw / base64 を比較しながら判断してください。

Q. font-display は何を選べばいい？ A. UI の本文・見出し用なら swap がデフォルト。フォールバックフォントで先に描画し、Web フォント到着後に差し替わります。アイコンフォント代わりに使う場合は block で短い待機時間を確保。装飾的な見出しのみで使うなら optional で 100ms 以内にロードできなければ放棄、という選択もあります。

Q. font-weight / font-style 違いの .woff2 が複数ある場合は？ A. 1 ファイルごとに @font-face を生成し、すべて同じ font-family 名で揃え、font-weight / font-style だけ変えて並べてください。ブラウザが font-weight: 700 を要求したときに該当する @font-face を自動選択します。Variable Font (.woff2 でも 1 ファイルに複数 weight が入っているタイプ) なら 1 つの @font-face で font-weight: 100 900 のように範囲指定が可能です。

Q. インライン base64 はキャッシュされない？ A. インライン化した CSS ファイル自体がブラウザキャッシュされるため、結果的にフォントもキャッシュされます。ただし CSS を頻繁に更新するサイトでは、フォントだけ別 URL で読ませた方がキャッシュ寿命が伸びる場合もあります。リリース頻度と合わせて判断してください。

Q. format('woff2') 指定は必須？ A. 必須ではありませんが、ブラウザがファイル取得前に「対応可能な形式か」を判定できるため、ヒント目的で書く慣例があります。ツール出力にも format('woff2') 付きで生成しています。

📚 豆知識

Web フォントの圧縮形式は .eot → .ttf → .woff → .woff2 と進化し、.woff2 は Brotli 互換圧縮で .woff よりさらに 30% 程度小さくなります。IE11 サポートを完全に切れる現在、.woff2 単独配信が主流で、base64 インライン化の対象も .woff2 一択になります。

ドイツ・ミュンヘン地裁が 2022 年 1 月に「Web サイトから Google Fonts へ直接アクセスさせる行為は訪問者の IP アドレスを米国側に送信する形になり GDPR 違反」と判断 (Az. 3 O 17493/20) して以来、欧州圏では Web フォントの self-host 化が急速に進みました。self-host にすると追加リクエストが増えるトレードオフが発生するため、base64 インライン化のニーズが再評価されています。日本国内でも改正個人情報保護法でフォント配信先の透明化を求める動きがあり、self-host + インライン化は意義のある選択肢です。