WOFF（Web Open Font Format）とは？仕組み・メリット・作成方法を徹底解説

WOFF（Web Open Font Format）は、Mozillaが開発したWebフォント用のファイル形式です。WOFFファイルには、圧縮されたTTF（TrueType Font）やOTF（OpenType Font）ファイルに加えて、ライセンス情報などのメタデータも格納できます。この記事では、WOFFについて知っておくべきポイントをわかりやすく解説します。

※本記事の内容は、WOFFおよびWOFF2ファイルの両方に適用されます。

WOFFファイルとは？

WOFFファイルは、ZIPファイルと同じように、他のファイルを格納するコンテナとして機能します。具体的には、TrueType Font（TTF）やOpenType Font（OTF）といったフォントファイルを圧縮して包み込む形です。これにより、Webデザイナーは多くのパソコンに標準搭載されているフォント以外の書体も自由に使用できるようになります。

なお、現在ではWOFFは後継規格のWOFF2へと移行しつつあります。WOFF2はより高度な圧縮アルゴリズムを採用しており、元のファイルサイズをさらに約30%削減できます。その結果、帯域幅の消費を抑えられ、ページの読み込みもより高速になります。拡張子は、WOFFが「.woff」、WOFF2が「.woff2」です。

WOFFファイルの仕組み

ほぼすべてのWebページは、CSS（Cascading Style Sheets）を使ってHTMLや画面上の各要素のレイアウトを定義しています。たとえば開発者は、CSSでユーザーのパソコンにインストール済みのフォントを参照することで、表示されるWebフォントを変更できます。しかし、指定したフォントがユーザーの環境（PCやブラウザ）でサポートされていない場合、ページ側のフォントスタックの設定によっては、別のフォントで代替表示されたり、まったく読み込まれなかったりすることがあります。

この問題を回避するには、カスタムフォントをWOFFファイルとして保存し、Webページの他の要素と一緒にサーバーに配置しておくのが有効です。デザイナーはCSSの「@font-face」プロパティでそのWOFFファイルを参照すれば、どの環境でも意図した通りのフォントをブラウザに表示させられます。

Google Chrome、Firefox、Microsoft Edge、Opera、Safariなど主要ブラウザはいずれもWOFF形式に対応していますが、古いバージョンを使用している場合は、最新版へのアップデートが必要になることがあります。

WOFFを使うメリット

WOFFファイルは、Web開発者が利用できるフォントの種類を広げるだけでなく、さまざまな利点をもたらします。主なメリットは以下の通りです。

• 圧縮による高速化：WOFFファイルは圧縮されているため、他のフォントファイル形式よりも速く読み込めます。
• HTML・CSS対応：画像ファイルと異なり、WOFFのテキストはHTMLやCSSで自由にスタイリングできます。
• SEO効果：テキスト画像と比べて、WOFFフォントの方が検索エンジン最適化（SEO）に有利です。
• 最適なレンダリング：WOFFファイルには、文脈依存の字形やオールドスタイル数字などの組版情報が含まれており、あらゆるデバイスで最適に表示できます。
• アクセシビリティ向上：テキストは音声読み上げが可能ですが、テキスト画像は読み上げできません。WOFFを活用することでサイトのアクセシビリティが高まります。
• 国際化対応：多言語の文字を含むフォントを埋め込めるため、サイトの国際化にも役立ちます。

オリジナルのWOFFフォントを作成する

FontForgeのようなフォントエディターを使えば、独自のフォントセットをデザインし、WOFFファイルとして書き出すことができます。また、FontForgeではWOFFをTTFやOTFに変換することも可能です。お気に入りのフォントエディターがTTFやOTFにしか対応していない場合は、「sfnt2woff」というツールを使えばフォントをWOFF形式に変換できます。

なお、Open Font LibraryやFont Squirrelには、商用・非商用を問わず無料で利用できるWOFF形式のフォントが数百種類公開されています。自作の前に、まずはこれらのライブラリをチェックしてみるのもおすすめです。