Webフォントサブセットとは? 必要なグリフだけを配信する

Webフォントサブセットとは、サイトが実際に使う文字だけを含むように削ぎ落としたフォントファイルで、ダウンロードサイズを大幅に削減します。

完全なフォントには多くの言語や記号のための数千のグリフが含まれることがありますが、ほとんどのサイトはそのごく一部しか使いません。サブセット化はフォントを必要な文字だけに絞り込み、ファイルサイズを削減してテキストの描画を高速化します。これはload指標に実質的な効果をもたらすbuild時の最適化で、assetのpipelineの一部として実行されます。

フォントが重い理由

完全なフォントは多くのscript、ウェイト、記号をサポートするため、ファイルが大きくなります。ほとんどのサイトは単一の言語といくつかのウェイトしか必要としないため、そのデータの大部分は無駄な帯域幅になります。

サブセット化の仕組み

サブセット化ツールは、指定した文字とunicodeの範囲のグリフだけを残し、残りを破棄します。その結果、サイトが表示するテキストを描画しつつ、使われないグリフを除いた、より小さなフォントが得られます。

静的サブセット化と動的サブセット化

静的サブセット化はbuild時に固定の文字セットへ絞り込みます。
unicode-rangeはフォントを言語ごとのファイルに分割し、必要に応じてloadします。
サブセット化したフォントを自前でホストすれば、余計なサードパーティへのリクエストを避けられます。

削り過ぎのリスク

サブセット化を過度に積極的に行い、必要な文字が欠けていると、その文字はfallbackグリフや四角として描画されます。サブセット化は動的コンテンツを含め、サイトが表示しうるすべての文字をカバーしなければなりません。だからこそ、ユーザー生成テキストには正確な文字リストよりも範囲指定のほうが安全なのです。

CI/CDにおけるWebフォントサブセット

buildはフォントをサブセット化して自前でホストし、CDNで長期的にcacheされるコンテンツハッシュ付きのフォントファイルを出力します。これをpipelineで行うことでサブセットがdeployと一致し、サブセット化の入力をピン留めすることで、出力されるフォントファイルがCIの実行をまたいで再現可能になります。

重要なポイント

Webフォントサブセットはサイトが使うグリフだけを残し、ファイルを小さくします。
unicode-rangeによるサブセット化は、動的テキストや多言語テキストに対してより安全です。
CIはフォントをサブセット化してハッシュ化するため、長期的にcacheされ、再現性が保たれます。