用語解説

WOFF2とは?HTML共有・AI生成サイトでの意味をやさしく解説

AI生成サイトのHTMLにフォントファイルが含まれているとき、ファイルの種類によって容量・対応ブラウザ・共有時の扱いが変わります。WOFF2は現在のWebフォントの標準形式で、最も圧縮率が高くほぼすべてのモダンブラウザで動作します。共有前に何を確認すればよいか、具体的に整理します。

ひとことで言うと

WOFF2(Web Open Font Format 2)はWOFF1より30〜50%小さいWebフォント形式です。Brotli圧縮を内部に使用しており、同じグリフデータでもTTFやOTFと比べてファイルサイズが大幅に小さくなります。Chrome・Firefox・Safari・Edgeすべての現行バージョンで対応しており、新規に作るHTMLではほぼ必ずWOFF2を選ぶべきです。

AIがHTMLを生成する際に参照するWebフォントのURLが`.woff`(旧形式)や`.ttf`のままであることがあります。その場合は対応するWOFF2のURLに置き換えるか、GoogleフォントであればURLを新しい形式に更新することでファイルサイズを削減し、共有先での読み込みを速くできます。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

HTML共有で関係する場面

フォントファイルをHTMLと同梱してZIPで共有する場合、WOFF2を使えばNoto Sans Japaneseのような大きな日本語フォントでも圧縮後のサイズが大幅に小さくなります。同じ書体のTTFが8MBある場合、WOFF2では3MB前後になることが多く、ZIPをメールに添付するときの上限サイズをクリアしやすくなります。

ギガサイト便のようなHTMLをURLに変換するサービスでは、フォントファイルも一緒にアップロードするとCDNで配信されます。WOFF2はブラウザとサーバー間のHTTP/2での多重化と相性がよく、他のリソースと並行してダウンロードされるため表示完了が早くなります。旧形式のWOFFと混在している場合は統一を検討しましょう。

よくある誤解

「WOFF2対応ブラウザでも古いiOSでは使えない」という情報が過去に広まりましたが、iOS 10以降(2016年リリース)でWOFF2は対応しています。現在市場に流通しているiPhoneでWOFF2が使えない端末はほぼ存在しないため、旧形式のWOFFをフォールバックとして用意する必要はありません。

「WOFF2は日本語フォントには向かない」という誤解もあります。Noto Sans JPなどの日本語フォントはグリフ数が多くファイルが大きいため、WOFF2の圧縮が特に効果的です。またサブセット化(使用する文字だけ抽出)と組み合わせれば、ページで使う漢字数百字分だけのWOFF2を10〜50KB以下に削減することが可能です。

安全に使うための注意点

カスタムフォントをWOFF2で配布する場合、ライセンスに「Webフォントとしての使用を許可」する条件が含まれているか確認してください。フォントのWebフォント利用は購入ライセンスとは別に許諾が必要なケースがあり、無断でHTMLに埋め込んで不特定多数に配布すると著作権侵害になることがあります。

WOFF2ファイルをBase64エンコードしてCSSに直接埋め込む方法はオフライン共有に便利ですが、ファイルサイズが約33%増加します。Noto Sans JPのような大きなフォントを全文字埋め込むとCSSが10MB超になり、ページ自体が非常に重くなります。埋め込みを使う場合は必ずサブセット化してから行ってください。

よくある質問

AI生成HTMLのCSSに.woffと.woff2の両方が@font-faceに書かれています。削除してWOFF2だけにしても問題ありませんか?

現在の対応ブラウザであれば.woff2だけで問題ありません。ただしIE11をサポートする必要がある環境では旧WOFFも残す必要があります。IE11サポート不要であれば.woffの行を削除してCSSをスリムにできます。

自社ロゴで使っているフォントをWOFF2に変換してHTMLに含めて共有してもいいですか?

フォントのライセンスによります。商用フォントの多くはWebフォントとしての配布に追加ライセンスが必要です。変換前にフォントメーカーのサイトでWebフォント利用の条件を確認し、不明な場合は問い合わせることをお勧めします。

WOFF2ファイルを共有URLで提供する場合、アクセス制限はかけられますか?

ギガサイト便のようなサービスではページURLにパスワードを設定できますが、フォントファイルのURLが個別に外部公開されている場合は直アクセスが可能です。重要なカスタムフォントはCDNのリファラー制限やトークン認証で保護するか、ページHTMLにBase64埋め込みして単体URLを公開しない方法を検討してください。

関連記事

「用語解説」の記事をもっと見る →