フォント軽量化(サブセット化)をブラウザーだけで、アップロードなしに
フルセットのフォントには数千のグリフが入っていますが、ページで使うのはごく一部です。フォント軽量化(サブセット化)は必要な文字だけを残し、結果を WOFF に圧縮する処理です。本格的なツールはコマンドライン(fontTools の pyftsubset、glyphhanger)か、ファイルをサーバーに送る必要があるものばかりで、ライセンス付きフォントでは問題になります。
このツールはすべてブラウザー内で動きます。TTF・OTF・WOFF 1.0・TTC を読み込み、フォント情報(名前、ライセンス、fsType 埋め込み許可、可変軸、Unicode ブロック別カバレッジ、対応言語、OpenType 機能、テーブルごとのサイズ)を表示し、コンポーネントと合字のクロージャを含む TrueType サブセットを作成して TTF と WOFF を書き出し、生成したフォントが読み込めるか確認したうえで unicode-range 付きの @font-face CSS を生成します。
-
フォントを選ぶ
TTF・OTF・WOFF・TTC ファイルをドロップするか、「フォントを選ぶ」をクリックします。TTC コレクションでは取り出すフォントを選びます。WOFF2(wOF2 シグネチャ)は検出され、理由とともに拒否されます。
-
フォント情報を確認する
ファミリー、バージョン、ライセンス(name ID 13)、fsType の埋め込み許可、fvar の軸、Unicode ブロック別カバレッジ、対応していると思われる言語、GSUB/GPOS 機能を確認します。グリフ一覧と検索欄で「このフォントに ẞ や € はあるか」が分かります。
-
残す文字を選ぶ
「残すテキスト」に文章を貼り付け、プリセット(基本ラテン文字、ラテン1、ギリシア文字、キリル文字など)にチェックを入れるか、Unicode 範囲を入力します。カウンターが収録済み・未収録の文字数とクロージャ後に残るグリフ数を示します。
-
出力モードを設定する
「OpenType 機能を残す」はカーニング・合字・可変軸を保ち、「最小ファイル」はグリフを再番号付けしてレイアウトテーブルを削除します。ヒンティングの削除と name テーブルの最小化も選べます。
-
サブセットを作成する
「サブセットを作成」をクリックすると、変換前後のサイズ、テーブル別の内訳、描画のセルフチェック、「.ttf をダウンロード」「.woff をダウンロード」ボタン、コピー用の CSS スニペットが表示されます。
サブセットの作り方
ツールは OpenType 仕様の sfnt ディレクトリを読み、cmap テーブル(形式 4 と 12 を優先)で文字をグリフに対応付けます。次にクロージャを計算します。複合グリフのコンポーネント(「e」とアクセントを再利用する「é」)、機能を残す場合はタイプ 1〜4 の GSUB 置換(単一・複数・選択置換と fi、fl、ffi などの合字)を安定するまで反復し、文脈依存置換(タイプ 5・6・8、タイプ 7 の拡張は解決済み)のサブルックアップを保守的に、さらに MATH テーブルの異体字と COLR テーブルのカラーレイヤーも含めます。
- 「機能を残す」モード:グリフ ID は変わらず、使わないアウトラインだけを空にします(長さ 0 の loca エントリ)。cmap は再構築し、GSUB・GPOS・GDEF・kern・fvar はそのまま残るので有効です。gvar は削除したグリフのデータだけを取り除きます。
- 「最小ファイル」モード:グリフを詰めて再番号付けし、コンポーネントを付け替え、hmtx・loca・glyf・cmap・maxp・hhea・post を再構築、レイアウトテーブルと可変テーブルを削除します。
- ヒンティング削除:fpgm・prep・cvt・hdmx・VDMX・LTSH を削除し、単純グリフと複合グリフから命令を取り除き、maxp と gasp を pyftsubset と同じように調整します。
- 書き出し:ソート済みディレクトリ、4 バイト境界のテーブル、テーブルのチェックサムと head の checkSumAdjustment の再計算、サイズに応じた短い/長い loca、そしてテーブルごとに zlib 圧縮した WOFF 1.0(圧縮が効かないテーブルは非圧縮のまま)。
- セルフチェック:生成したフォントを FontFace API で読み込み、プレビューのテキストを元のフォントとサブセットで並べて描画し、ピクセル単位で比較します。
各テーブルの役割とツールの処理
| テーブル | 役割 | 処理 |
|---|---|---|
| glyf, loca | TrueType アウトラインとグリフ索引:容量の大半 | 未使用アウトラインを空にする(機能を残す)または削除して再番号付け(最小ファイル) |
| cmap | Unicode 文字からグリフへの対応 | 再構築:BMP には形式 4、BMP 外の文字があれば形式 12 を追加 |
| hmtx, hhea | 送り幅と左サイドベアリング | そのまま維持(ID 固定)または numberOfHMetrics を最適化して再構築 |
| GSUB, GPOS, GDEF, kern | 合字、置換、カーニング、マークの配置 | 機能を残すモードでは無変更、最小ファイルでは削除(警告を表示) |
| fpgm, prep, cvt, hdmx, VDMX, LTSH | TrueType ヒンティングとデバイスメトリクス | 「ヒンティングを削除」で削除し、グリフ命令も除去 |
| name, post, DSIG | 名前とライセンス、グリフ名、電子署名 | name は完全または最小(ID 0〜6、13、14、16、17 に加え、可変フォントの軸名とインスタンス名)、post は形式 3、DSIG は常に削除 |
TrueType(glyf)アウトラインのフォントに対する動作。CFF/OTF フォントは解析・WOFF 変換・テーブル削除のみ可能で、アウトラインのサブセット化は行いません。
フォント軽量化が役立つ場面
- コーポレートサイトやブログ:基本ラテン文字、ラテン1、約物だけを配信してテキストの初回表示を速くする。
- 見出しやロゴ用のディスプレイ書体:キャッチコピーの文字だけを残し、数百 KB を数 KB にする。
- CJK フォント(TrueType):ページの実際の文章を貼り付け、数 MB のフォントを数十 KB にする(IPA ゴシック 6.2 MB は、異なり 154 文字の段落で WOFF 約 55 KB、「最小ファイル」モードなら 22 KB)。OTF/CFF 形式の CJK フォントはサブセット化できません。
- 購入・導入前の確認:フォントをインストールせずに言語カバレッジ、OpenType 機能(tnum、smcp、ss01 など)、fsType の許可を調べる。
- TTF から WOFF への変換:ライセンス付きファイルをサーバーに送らずに、有効な WOFF 1.0 と対応する @font-face スニペットを得る。
よくある問題と対処法
- 一部の文字が別のフォントで表示される:その文字がサブセットに入っていません。カウンターとセルフチェックが未収録の文字を示すので、残すテキストに追加してください。
- 合字やカーニングが消えた:「最小ファイル」を選んでいます。「OpenType 機能を残す」に戻してください。
- WOFF が思ったほど小さくない:機能を残すモードでは hmtx と loca が元のサイズのままです。WOFF はこの領域をよく圧縮し、最小ファイルモードなら実際に縮みます。
- WOFF2 が拒否される:別のツールで先に TTF か WOFF へ変換してください(このツールには Brotli/WOFF2 のデコーダーが含まれていません)。
- OTF がサブセット化されない:アウトラインが CFF です。先に TTF に変換するか、解析と WOFF 変換だけを利用してください。
プライバシー:フォントの読み込み・解析・書き出しはすべてブラウザー内で行われ、ファイルはアップロードも保存もされません。ライセンス付きフォントでも安心です。制限:CFF/OTF アウトラインはサブセット化不可、WOFF2 は読み書き不可、文脈依存置換は保守的に保持(必要以上のグリフが数個残ることがあります)、異体字セレクタ(cmap 形式 14)は削除、最小ファイルモードではビットマップとカラーのテーブルを削除、200 MB 超のファイルは拒否。軽量化したフォントを公開する前にライセンスを確認してください。
よくある質問
フォントのサブセット化とは何ですか。どれくらい軽くなりますか。
サブセット化とは、ページで使う文字のグリフだけをフォントファイルに残す処理です。たとえば数千文字入りのフルフォントから、基本ラテン文字と必要な記号だけを取り出します。削減量はフォントの収録内容に大きく左右されます。多くの文字体系を収録した大きなフォントなら、ラテン文字のサブセットは元の 5〜10% 程度になることが多い一方、もともとラテン文字だけのフォントではそこまで減りません。WOFF 圧縮でさらに 4 分の 1 から半分ほど減ります。このツールでの実測例:DejaVu Sans(6,253 グリフ、742 KB)を基本ラテン文字とラテン1に絞ると、OpenType 機能を残した WOFF で約 50 KB、「最小ファイル」モードでは 14 KB になります。ツールはテーブルごとに変換前後のサイズを表示します。
購入したフォントをサブセット化してもよいですか。
ライセンス次第です。OFL や Apache などのオープンライセンスは改変を認めています(ただし OFL ではサブセットは改変版にあたり、フォントに Reserved Font Name がある場合は軽量化したファイルの名前を変える必要があります)。商用の Web ライセンスも埋め込み用のサブセット化を許可するものが多い一方、明示的に禁止するものもあります。このツールはフォント内のライセンス文(name ID 13)を表示し、fsType フィールドを解読します。「サブセット化禁止」ビット(0x0100)が立っていれば、ライセンスはサブセット化を認めていません。公開前に必ず契約内容を確認してください。
なぜ WOFF2 に対応していないのですか。
WOFF2 は Brotli 圧縮に加えて glyf・loca テーブルの専用変換を使いますが、ブラウザーの Compression Streams API がどの環境でも使えるのは gzip と deflate だけです(Chrome はまだ Brotli をネイティブに展開できません)。WOFF2 の読み書きには Brotli ライブラリとその変換のデコーダーを同梱する必要があり、100% ローカルで動くこのツールでは行っていません。別のツールで WOFF2 を TTF か WOFF に変換してからここで軽量化し、必要なら再び WOFF2 にしてください。WOFF2 は通常 WOFF 1.0 より 15〜30% 小さくなります(W3C の評価レポートでは TrueType フォントで中央値約 25% の削減)。
「OpenType 機能を残す」と「最小ファイル」の違いは何ですか。
前者はグリフ ID を維持し、使わないアウトラインだけを空にします。GSUB・GPOS・GDEF・kern テーブルはそのまま有効なので、合字、カーニング、可変フォントの軸が引き続き動作します。後者はグリフを再番号付けしてこれらのテーブルを削除します。ファイルは最小になりますが、カーニングと合字は失われ、可変フォントは既定インスタンスになります。Web サイト用途ではほぼ常に前者が適切です。
ヒンティングを削除すると表示は変わりますか。
TrueType のヒンティング(fpgm・prep・cvt テーブルとグリフ命令)は、主に Windows の ClearType で小さなサイズを表示するときに効きます。macOS、iOS、Android、そして多くの Linux ブラウザーは無視します。ヒンティングの強いフォントでは削除で 20〜50% 軽くなることが多く、その代わり Windows の小さな文字の表示がわずかに変わります。既定でオンですが、Windows で小さな本文を読む利用者が多ければオフにしてください。
生成された CSS の unicode-range はどう使いますか。
unicode-range 記述子は、サブセットに含まれる文字を最も短い形(範囲の統合、揃った範囲ではワイルドカード)で列挙します。ブラウザーはページがその文字を 1 つでも使うときだけファイルをダウンロードするため、フォントをラテン・キリル・ギリシアなど複数のファイルに分けて必要なときだけ読み込ませられます。@font-face スニペットをスタイルシートに貼り、src に書かれたパスにファイルを置いてください。