productivity

フォント軽量化

Webで使う文字だけを残してTTF / OTFを軽量なWOFF2へ変換し、CSSとWebfont ZIPまでまとめて作成します。

ローカル処理

ファイルについてこのツールで選択したファイルや入力内容は、Browser Kittyのバックエンドへアップロードせずブラウザ内で処理します。

操作デモ 実際の操作の流れを短い動画で確認できます。

このツールについて

フォント軽量化は、Webサイトで実際に使う文字を集め、TTF / OTFから不要な文字を除いたWOFF2 Webフォントを作るブラウザツールです。文章の直接入力だけでなく、HTML / CSS / JavaScript / Markdownなどのローカルファイルから文字を集め、重複を除いた共通文字セットとして複数フォントへ適用できます。

生成前に各フォントのcmapを読み、不足文字を文字そのものとUnicodeコードポイントで確認できます。OS/2 fsTypeも表示し、No Subsetting / Bitmap Embedding Onlyは生成を止めます。生成後は元フォントとの比較、@font-face CSS / unicode-range、個別WOFF2、demo.htmlやmanifest.jsonを含むWebfont ZIPまで作成できます。

こんなときに便利

日本語Webフォントの容量を減らし、実際に使う文字だけのWOFF2を作りたい
Regular / Bold / Italicなど複数のフォントを同じ文字セットでまとめて軽量化したい
サイトのHTML / CSS / JS / Markdownから使用文字を集めたい
生成前に不足文字を確認し、代替フォントへのフォールバックを減らしたい
TTF / OTFからWeb用の@font-face CSSとunicode-rangeをまとめて作りたい
作ったWebフォントをWOFF2・CSS・demo.html込みのZIPで受け渡したい
自作したTTFをWebサイト向けに必要文字だけのWOFF2へ変換したい

できること

このツールで利用できる主な機能です。

文章の直接入力、日本語プリセット、TXT / MD / CSV / JSON / YAML / HTML / CSS / JS / TS / XML / SVGから必要文字を収集
各フォントのcmapを読み、不足文字とUnicodeコードポイントを生成前に確認
OS/2 fsTypeと取得できるライセンス情報を表示し、No Subsetting / Bitmap Embedding Onlyは生成を停止
Restricted Licenseのフォントは権利・許可を確認した場合のみ個別に生成対象へ指定
Regular / Bold / Italicなど複数のTTF / OTFへ同じ文字セットを一括適用
フォントごとにfamily / weight / style / 出力ファイル名を編集
対応するCFF2 / fvarベースのVariable Fontは可変情報を保持したままサブセット
生成前後のフォントを同じ文章・16〜72 pxで横並び比較
生成WOFF2の個別保存、@font-face CSSとunicode-rangeのコピーに対応
fonts/*.woff2 / fonts.css / demo.html / manifest.jsonをまとめたfont-subset.zipを生成
日本語プリセットにASCII、基本記号、ひらがな、カタカナ、常用漢字2,136字、日本語まとめを用意
HarfBuzz、Brotli、Worker、常用漢字プリセットを単一HTMLへ内包し、実行時CSPはconnect-src 'none'

使い方

1つまたは複数のフォントを追加します。サブセット生成元はTTF / OTFで、WOFF / WOFF2は確認用途として追加できます。
「文字」で実際に使う文章を入力する、日本語プリセットを選ぶ、またはTXT / MD / CSV / JSON / YAML / HTML / CSS / JS / TS / XML / SVGを追加します。
「フォントの文字対応」で、各フォントと全体の不足文字を確認します。実際に必要な文字が不足していれば、別のフォントや文字セットを見直します。
各フォントのfsTypeと取得できるライセンス情報を確認します。Restricted Licenseは権利・許可がある場合だけ個別確認し、No Subsetting / Bitmap Embedding Onlyは生成できません。
「出力」で生成対象を選び、family / weight / style / 出力ファイル名を確認・編集します。
選択したフォントを生成します。複数フォントは1本ずつ処理され、1本が失敗しても後続フォントの処理を続けます。
成功したフォントを選び、元フォントと生成WOFF2を同じ文章・文字サイズで比較します。
個別WOFF2を保存する、生成された@font-face CSSをコピーする、またはfont-subset.zipを保存します。

対応範囲

生成元フォント: TTF / OTF。WOFFは確認可能ですが生成元には使いません。WOFF2も入力できますが、v1.0.0では内部テーブルを展開しないためcmap文字対応とfsTypeは確認できません。
文字ソース: 直接入力、ASCII、基本記号、ひらがな、カタカナ、常用漢字2,136字、日本語まとめ、TXT / MD / CSV / JSON / YAML/YML / HTML/HTM / CSS / JS/MJS / TS / XML / SVG。
文字コード: UTF-8、UTF-8 BOM、UTF-16LE BOM、UTF-16BE BOM。Shift_JISは自動判定しません。
文字対応: フォントのcmapを読み、不足文字を文字とU+XXXX / U+XXXXXXで表示。ブラウザの代替フォント表示には依存しません。
サブセット制限: OS/2 fsTypeを確認。No Subsetting / Bitmap Embedding Onlyは生成停止、Restricted Licenseは権利・許可の個別確認が必要です。
Variable Font: 対応するCFF2 / fvarベースは可変情報を保持します。axis固定はv1.0.0では行いません。
出力: 個別WOFF2、@font-face CSS、unicode-range、font-subset.zip。ZIPにはfonts/*.woff2、fonts.css、demo.html、manifest.jsonを含みます。
入力上限: フォントは1ファイル100 MB、最大12ファイル、合計300 MB。文字ソースは1ファイル10 MB、最大200ファイル、合計50 MB。
実行時通信: HarfBuzz、Brotli、subset Worker、プリセットデータをHTMLへ内包し、CSPはconnect-src 'none'です。

制限・注意点

v1.0.0でサブセット生成元として使えるのはTTF / OTFです。WOFFは確認できますが生成元には使いません。
WOFF2入力は内部テーブルをまだ展開しないため、cmap文字対応とfsTypeを確認できません。
TTC / OTCのface選択には対応していません。
Shift_JISの文字ソースは自動判定しません。
不足文字があっても生成自体は可能ですが、その文字は該当フォントの出力には入りません。
日本語まとめプリセットは開始用セットで、人名・地名・異体字・表外漢字・記号など日本語で使われる全ての文字を保証しません。実際のサイト文章も追加してください。
Variable Fontのaxis固定には対応せず、対応フォントは可変のまま保持します。
カラーフォントや一部の特殊なレイアウト方式はbest effortで、v1.0.0の互換保証対象外です。
fsTypeはフォント内部の技術フラグであり、Webフォント利用の法的許諾を自動判定するものではありません。フォントのライセンス / EULAも確認してください。
大きなフォントや多数の入力ではブラウザメモリを多く使用します。

よくある質問

TTFやOTFをWOFF2へ変換できますか？

はい。TTF / OTFから、指定した文字だけを残したWOFF2を生成できます。単純な形式変換ではなく、入力した文字セットに合わせてサブセットします。

日本語フォントも軽量化できますか？

できます。ひらがな、カタカナ、常用漢字2,136字などのプリセットがあります。ただし日本語まとめだけで全ての人名・地名・異体字などを網羅するわけではないため、実際にサイトで使う文章も追加してください。

不足文字はどうやって確認しますか？

各フォントのcmapを読み、不足している文字とU+XXXX / U+XXXXXXを表示します。ブラウザの代替フォントで見えているかどうかには依存しません。

複数のフォントをまとめて処理できますか？

はい。Regular / Bold / Italicなど複数のTTF / OTFへ同じ文字セットを適用できます。処理は1本ずつ行うため、途中の1本が失敗しても後続フォントを続けます。

WebサイトのHTMLやCSSから使用文字を集められますか？

はい。HTML / CSS / JS / TS / Markdownなど対応するローカルファイルを追加して文字を収集できます。HTML / XML / SVGはコードを実行せずデータとして解析します。

Webフォント利用可否を自動判定してくれますか？

いいえ。fsTypeと取得できるライセンス情報を確認できますが、fsTypeだけで法的な利用許諾を判断することはできません。使用するフォントのライセンス / EULAも確認してください。

生成したファイルには何が入りますか？

個別WOFF2を保存できるほか、font-subset.zipにはfonts/*.woff2、fonts.css、demo.html、manifest.jsonが入ります。元フォントや入力文章、ソースファイル本文はZIPへ含めません。

フォントやサイト文章はサーバーへアップロードされますか？

いいえ。フォント情報確認、文字収集、サブセット生成、比較、CSS生成、ZIP書き出しはブラウザ内で行います。Web版では最初のHTML取得通信のみ発生します。

オフライン版・ソースコード

生成済み単一HTMLはHarfBuzz、Brotli、subset Worker、常用漢字プリセットを内包し、CSPはconnect-src 'none'です。ブラウザや環境がローカルHTML実行を許可する場合は、保存したdist/index.htmlをネットワークなしで開いて利用できます。

GitHubでソースを見る