WOFF2ファイルとは

WOFF2 はバイナリ形式です。これを知っているプログラムにしか意味を持ちません。 ウェブのために使われます。

拡張子は .woff2、正式名称は Web Open Font Format 2 です。ただしどちらも、そのファイルが中に何を持てるかほどには多くを語りません。このページの残りは、その中身についての話です。

W3C が 2018 年に公開しました。 仕様は WOFF 2.0 です。

古さが役に立つのは、ごく実務的な理由からです。形式が古いほど、それを覚える時間が多くのプログラムに与えられてきたということだからです。

仕様書がそのまま公開されているので、中身を推し量るのではなく文書を読んで実装できます。この形式が数多くのプログラムに載っているのはそのためであり、20 年前に書かれたファイルが今も開けるのもそのためです。ただし「仕様が公開されている」ことと「使用料が要らない」ことは別の話です。中でコーデックを包んでいる形式では、特許のライセンスは仕様書が答えていない別の問題として残ります。

WOFF2 ファイルは中身をそのまま保存します。保存し直しても何も変わらないので、開いて、直して、また保存する——それを何度繰り返しても劣化は積み上がりません。これが、渡すための形式ではなく作業のための形式である理由です。

fonttoolsとFontForgeが読めますし、同じ種類のプログラムならたいてい読めます。

ファイルが開かないとき、形式が悪いことはめったにありません。たいていはプログラムのほうが形式より古いのです。もっと古い形式に変換してしまうのが確実な逃げ道で、このサイトの残りの部分はそのためにあります。

これは今のブラウザーならどれでも読めます。

ですからページに置くのも、メッセージに添えて送るのも、安心してできます。相手が何をインストールしているかを考える必要がありません。

WOFF2 は渡すために作られたもので、中で作業するためのものではありません。編集は可能ですが、快適だったためしはありません。賢い道は、元のファイルへ戻ってもう一度書き出すほうを通ります。

WOFF2 は TrueType や OpenType のような意味でのフォント形式ではありません。これはラッパーです。同じフォントテーブルを、フォントデータの並びに合わせて調整された Brotli で圧縮し、わずかなメタデータを添えたものです。WOFF2 を展開すると、元になった TTF や OTF が出てきます。

これがウェブサイトにとって唯一の理にかなった選択であり、デスクトップでは無意味な理由です。この形式は転送時のファイルを小さくするために存在し、元のフォントに対しておよそ三割から五割小さくなります。OS がこれをインストールできるようにしていないのは、元のフォントがすでに持っていない何かをインストールする意味がないからです。

フォントは @font-face のルールを通じてページに届きます。ファミリー名、ファイル、そのファイルが表すウェイトとスタイルです。名前は任意で自分のスタイルシートの中だけで通用し、フォントベンダーが付けた名前と一致させる必要はありません。ウェイトとスタイルの宣言があるからこそ、文字が太字や斜体で組まれたときにブラウザーが正しいファイルを選べます。

一番よくある間違いは、ファミリーに対して一つのファイルだけを宣言しておきながら、デザイン上で太字を使うことです。ブラウザーは拒否しません。標準ウェイトをにじませて疑似的な太字を合成し、その結果は、同じフォルダーに眠ったまま使われていない本物の太字より明らかに見劣りします。ファイルごとに一つの @font-face ルールを、正直なウェイトとスタイルの値とともに書く、というのがこの規律のすべてです。

一般的な市販フォントは、ラテン文字、拡張ラテン文字、キリル文字、ギリシャ文字、通貨記号、そしてあなたのサイトの誰も打つことのない数百のグリフをカバーしています。それがすべての訪問者にダウンロードされています。

サブセット化は実際に必要な文字だけに絞り込み、その節約は圧縮による効果を上回ることがほとんどです。300 KB のデスクトップフォントを基本ラテン文字にサブセット化して WOFF2 に変換すると、たいてい 25 KB 前後に収まります。この二つをこの順番で行い、サブセット化ツールには注意してください。使われている文字だけを残すよう指示すると、リガチャーや異体字のテーブルも一緒に喜んで捨ててしまい、それらを有効にする CSS が何もしなくなります。

まだダウンロードしていないフォントを使うよう指示されたブラウザーは、その間にどうするかを決める必要があります。既定ではほとんどのブラウザーで最大三秒待ち、何も表示しません。これが見えない文字のちらつきで、独自の書体を使うサイトが遅く感じられる最も一般的な原因です。

対処は一行で済みます。@font-face のルールに font-display: swap を加えてください。文字はすぐにフォールバックのフォントで描画され、本物のフォントが届いた時点で再配置されます。この再配置は目に見えますが、真っ白なページよりずっとましです。font-display: optional はさらに踏み込んでいて、フォントがほぼ即座に準備できなければ、その訪問ではそもそも使われません。再配置は完全になくなりますが、その代わり書体を一度も見ないまま終わる訪問者も出てきます。

サードパーティーのサービスからフォントを読み込むのは、かつては訪問者が別のサイトですでにキャッシュ済みのファイルを持っている確率が高く、速いとされていました。ブラウザーがサイトごとにキャッシュを分離するようになってからは、これは成り立ちません。今ではすべての訪問者が改めてダウンロードすることになり、フォントを取得する前に別サーバーへの追加接続というコストがかかります。

今ではほぼすべての場合で自前配信のほうが速く、リクエストの経路からサードパーティーを取り除ける点でも、プライバシー法の観点でも、相手のサービスが不調なときにサイトが動き続けるという意味でも意味があります。ファーストビューに表示される一つか二つのフォントを preload しておくのが、残る有効な工夫です。

不要です。WOFF2 は Safari やモバイルブラウザーを含め、現行のブラウザーすべてで長年対応されていて、かつてどの @font-face ルールにも付いていた WOFF、TTF、EOT、SVG というフォールバックの並びは、今では過去の遺物です。

WOFF2 だけを宣言するのが現在の助言です。それを読めないほど古いものは、システムフォントへ自然に切り替わり、それは十分に許容できる結果です。誰も使っていないブラウザーのために同じ書体を五コピーも全員に配信するより、はるかに理にかなっています。

デスクトップフォントを WOFF2 に変換するのは数秒で終わりますが、それに付いてきたライセンスに違反していることがよくあります。デスクトップライセンスは端末へのインストールとそれを使った制作物を対象にしていて、ウェブでの利用は通常別のライセンスとして、しばしば月間ページビュー数に応じて別料金で販売されています。

知っておく価値のある例外はオープンなライセンスです。SIL Open Font License のもとで公開されたフォントは、単体で販売せず予約された名前を再利用しない限り、自由に変換し、自前配信し、サブセット化できます。無料フォントサイトにある多くのフォントはこれに該当し、ウェブの多くが少数のオープンなフォントファミリーで組まれている理由でもあります。