WOFF を WOFF2 に変換

この拡張子のファイルが単独で見つかることはまれです。fonts というフォルダーの中に .eot や .svg、.ttf、場合によってはイタリック用の二つ目の .woff が並び、そばにあるスタイルシートには五つの src が並んだルールと、Internet Explorer についてのコメントがあります。あらゆるブラウザーに届けることが唯一の方法だった時代に、ウェブフォント生成ツールが作った一式です。

いま考えるべきなのは「このファイルを軽くする」ことではなく「このフォルダーをウェイトごとに一枚まで減らす」ことです。書き出し直す作業自体は簡単で、時間をかける価値があるのはルールの見直し、文字セットの確認、そしてそもそも変換して良いのかというライセンスの確認です。

どちらのコンテナも、TTF や OTF が持っているのと同じ sfnt テーブル — 輪郭、文字コード表、水平方向のメトリクス、カーニング、OpenType の機能定義 — を保持しています。WOFF はそれぞれのテーブルを zlib で圧縮するだけですが、WOFF2 はまずテーブルをよく圧縮できる形に変換したうえで、Brotli で圧縮します。

圧縮アルゴリズムの違いと前処理の追加が、普通のテキスト用書体でおよそ三割の削減につながります。書体そのものは変わりません。輪郭も字間も機能もそのままで、ファイルを差し替えれば表示は同じままダウンロード量だけが減ります。

本能的にはデスクトップ用の原本を使いたくなりますが、この変換に関してはどちらでも変わりません。WOFF は可逆のコンテナなので、開けば TTF が持っているのと同じテーブルがそのまま出てきます。

これは、デスクトップにインストールできる形式へ変換する場合とは対照的です。あちらは Web 用のファイルがサブセット化・改名されていることが多く、デスクトップの原本のほうが明確に良い結果になります。WOFF2 への変換に限っては、手元にある方を使えば十分です。

その時代に生成されたルールは、クエリー文字列付きの EOT、生成されていれば WOFF2、WOFF、TTF、フラグメント識別子付きの SVG という五つの参照を持っています。うち二つは、もう誰も使っていないブラウザーのためのものです。

WOFF2 は現行のあらゆるブラウザーに届くため、url("brand.woff2") format("woff2") の一行だけで足ります。ただし削除する前に、自分のサイトのアクセス解析で実際の状況を確認してください。「現行のあらゆるブラウザー」と「このサイトを訪れるすべてのブラウザー」は必ずしも同じではなく、社内ネットワークのような例外がその差になることがあります。

誰も読みたがらない話ですが、一番大事な部分です。商用のウェブフォントライセンスは、供給されたファイルの改変や変換を明示的に禁じていることが珍しくありません。フォントベンダーによっては WOFF2 も自分たちで供給していて、変換ではなく依頼を前提にしていることもあります。

引き継いだプロジェクトに付いてきたフォントには、どこかにライセンスがあるはずです。購入記録、ブランド引き継ぎ資料、リポジトリの履歴、あるいは生成ツールが同じフォルダーに残したテキストファイル。ダウンロードしたテンプレート由来のフォントは、証明されるまでライセンス不明として扱うのが安全です。SIL Open Font License のような自由なライセンスは、単体で販売せず予約された名前を再利用しないという条件のもとで、変換やサブセット化、再配布を明示的に許可しています。

ウェブフォントの容量削減の大部分はグリフを削ることで達成されるため、当時の一式は基本ラテン文字と一部の記号だけに切り詰められていることがよくあります。ユーロ記号、正しいエムダッシュ、カーリーの引用符、三点リーダー、ł や ğ、ș を含む名前などが、いま抜けている理由です。

書き出し直しではこれは補われません。見出しに空白の四角や明らかに違うフォールバックの文字が出るなら、そもそもファイルに文字が入っていなかったということです。デスクトップの原本から、サイトが実際に使う文字セットで作り直すのが本来の対処です。

その世代の一式には、標準、イタリック、ミディアム、セミボールド、ボールド、ボールドイタリックといったウェイトごとのファイルが並びます。ダウンロードも @font-face のブロックも六つ分あり、ウェイトも決まった段階しか選べません。

そのタイプフェイスが可変フォントとして公開されているなら、WOFF2 一つで連続したウェイト軸をまかなえ、合計サイズも静的な一式より小さくなることがよくあります。これは書体そのものについての判断なので、六つのファイルを書き出し直す前に、フォントベンダーが可変版を出していないか確認しておく価値があります。

すべてのフォントは name テーブルを持っていて、フォント生成ツールはこれを自由に書き換えます。ブランド上は特定の名前を持つファイルが、内部では brandsans-webfont のような名前になっていることがよくあります。

@font-face のルールは好きなファミリー名を宣言できるため、この食い違いは長年気付かれないままになります。訪問者の端末にインストールされているフォントと内部名が衝突する場合や、異なる時期に作られた二つのファイルが同じファミリー名を主張する場合に問題が表面化します。この変換は内部名をそのまま引き継ぐため、WOFF が持っていた名前は WOFF2 でも同じです。

ファイルを差し替えるのと同時に整えておく価値があるのが三つあります。フォントは差し替わることがないので、ハッシュ付きのファイル名で長いキャッシュ期間を設定すること。ファーストビューに使うウェイトには preload リンクを付け、スタイルシートの解析後に改めてフォントを見つけに行く往復をなくすこと。サブセットを分けているなら unicode-range を指定し、キリル文字を使わないページがキリル文字用のファイルを取得しないようにすることです。

フォントは、サーバー側の圧縮がかえって逆効果になる数少ないアセットの一つでもあります。WOFF2 はすでに Brotli で圧縮されているため、さらに gzip をかけても節約にならず、無駄な処理が増えるだけです。多くのサーバーは既定でフォントの MIME タイプを圧縮対象から除外しています。

この変換はブラウザーの中ではなく、サーバー上で行われます。fontTools にブラウザー向けのビルドがないためです。ファイルは暗号化された通信で送られ、隔離された環境で処理され、作業ディレクトリはジョブの終了時に削除されます。

無料枠は 1 ファイルあたり 25 MB で、ウェブフォントとしては十分すぎる大きさです。一式には通常六つのファイルが含まれるため、フォルダーごとまとめて変換し、ZIP として受け取るのが現実的な進め方です。