コンテンツへ移動
ブログに戻る

Macのオフラインフォントサブセット化:CJKフォントをWOFF2へ縮小する

Leibniz Li

@leibnizli
+

Webサイト、Webアプリ、デジタルプレゼンテーションを作るとき、次のような困った場面に遭遇したことはありませんか?見出しに使う完璧な中国語・日本語・韓国語(CJK)フォントを見つけたのに、1つのTTFファイルが10MB以上ある。Webページに配置するとレイアウトはすぐ表示されるのに、見出しが画面に現れるまで何秒もかかる。ウェイトをいくつか追加すると、初回読み込みのパフォーマンスが完全に悪化する。

本当の問題はフォント自体ではなく、「完全な文字セット」です。完全なCJKフォントには数万のグリフが含まれますが、Webサイトの見出し、バナー、プレゼン資料で実際に使う文字は、合計で20文字程度かもしれません。

サブセット化とは、不要な文字をすべて取り除き、実際に使うグリフだけを残す処理です。サブセット化後は、10MBのフォントが数十KBに縮小され、ファイルサイズを桁違いに削減できます。

従来、フォントのサブセット化には、ターミナルで長く複雑なpyftsubsetコマンドを入力するか、適当なオンラインサービスへフォントをアップロードする必要がありました。しかし商用フォントは厳格なライセンス契約に守られています。第三者のクラウドサーバーへアップロードすると、会社の重要なアセットとコンプライアンスが危険にさらされます。

より良く洗練された解決策が**WebFont: Subset & Convert**です。Mac専用に設計されたこのネイティブデスクトップユーティリティは、難しいフォントサブセット化の処理を、Mac上で簡単なクリック操作に変えます。

WebFont

なめらかなMac体験:ピクセル単位で正確なサブセット化

真のネイティブMacアプリとして、WebFontは複雑なサブセット化を最もシンプルな形に整理します。サブセット範囲を定義する方法は2つあります。

  • 現在の選択モード:ビジュアルグリッドから必要なグリフをクリックして選びます。選択したものだけが残ります。
  • テキスト入力モード:文章を貼り付けるか、.txtファイルをドラッグ&ドロップします。ツールが重複しない文字を自動抽出し、正確なサブセット範囲を定義します。日本語や韓国語など、Unicodeブロックのプリセットにも対応しています。

見出しやバナーの文章を貼り付けるだけで、あとはWebFontに任せられます。必要な文字はすべて残り、不要な文字はすべて消えます。

「文字を削除する」だけではない:OpenTypeテーブルを細かく制御

多くのオンラインツールは、未使用文字を削除するだけで終わります。しかしフォントファイルにはベクター形状だけでなく、複雑な合字や高度なタイポグラフィを処理するGSUB/GPOSなどの大きなOpenTypeレイアウトテーブルも含まれます。Web用途では不要なデータがページ読み込みを遅くすることがあります。

WebFontにはOpenType戦略が3段階あり、Macのシステム設定を調整するように、フォントの縮小を細かく制御できます。

  • すべてのレイアウト機能を保持:複雑な合字や異体字など、高度なタイポグラフィ効果が必要な場合に最適です。
  • 必要な位置調整だけ保持:冗長な置換ロジックを取り除きつつ、基本的な位置調整を残します。通常のテキスト表示に影響を与えず、ファイルを大幅に小さくできます。
  • すべてのレイアウトテーブルを削除:究極の圧縮です。グリフが正しく表示される限り、必要最小限のデータだけを残します。

タイポグラフィに詳しいユーザー向けに、Feature Tagで絞り込み、特定のOpenType機能を保持または削除する指定もできます。この細かさは、同種のツールではほとんど見られません。

フロントエンド開発者向け:ワンクリックWeb Package書き出し

縮小したフォントファイルは始まりにすぎません。Webで使うには、@font-faceルール、unicode-rangeの定義、確認用のデモページを手作業で書く必要があります。

WebFontはMacの生産性エンジンとして、この作業をすべて引き受けます。Web Package書き出しを使えば、実運用に対応した完全なパッケージをワンクリックで生成できます。

  • fonts/ディレクトリ:WOFF2とWOFFの両方を収録します。最新ブラウザーは高圧縮のWOFF2を使い、古いブラウザーは安全にWOFFへフォールバックします。
  • すぐ使えるCSS@font-face宣言とサブセットに正確なunicode-rangeを含むスタイルシートを自動生成します。
  • demo.htmlプレビュー:フォントサイズをすぐ試せるライブプレビューです。「文字 → Unicode → HTML Entity」の対応表もあり、デバッグが簡単です。

超小型のフォントファイルと自動生成されたunicode-range分割を組み合わせることで、WebでCJKフォントを使う際のパフォーマンスボトルネックを完全に解消します。

見積もりと検証:安全なローカルワークフロー

多くのツールはサブセット化を「中身の見えない箱」として扱います。ファイルを生成してから文字の欠落に気付き、削除してやり直すことになります。WebFontはMacユーザーへの配慮を設計に反映し、ファイルを書き込む前にサブセットプレビューでリアルタイムの見積もりを表示します。

  • 推定ファイルサイズ:文字を選んだ瞬間に、WOFF2/WOFFがどれだけ小さくなるか確認できます。
  • 文字欠落の警告:貼り付けた文字が元のフォントにない場合、すぐに赤色で警告します。公開後に豆腐(□)を発見することはありません。

さらに、サブセットフォントをMacのディスクへ書き込む前に、WebFontは厳格な内部検証を実行します。デコーダーの有効性、必須テーブル、Unicodeマッピングの重複競合を検証し、生成前にすべての問題を検出します。最終出力が健全で使えるファイルになることを保証します。

妥協のないプライバシー:フォントは常にMac上に

企業ユーザーやデザイナーにとって最も重要な点は、プライバシーと商用ライセンスの遵守です。

WebFontの解析、サブセット化、形式変換はすべてMac上でオフラインかつローカルに実行されます。ネットワーク接続不要、クラウドへのアップロードなし、外部サーバーAPI呼び出しなしです。価値の高い商用フォントや未公開のマーケティング文章は、自分のデバイスに安全に保管されます。Wi-Fiのない国際線でも、問題なくフォントをサブセット化できます。

まとめ

タイポグラフィの目的は情報を伝えることです。フォントのサブセット化は、その情報をWeb上でより速く効率的に届けます。

WebFontは、かつて面倒でエラーが起こりやすく、コンプライアンスリスクのあるコマンドライン作業だったものを、洗練されたプロフェッショナルな完全オフラインのMacネイティブツールへまとめました。文字単位の抽出、OpenTypeテーブル制御、生成前の見積もりと検証、ワンクリックWeb Package書き出しまで、フォント縮小の作業を完成させます。

フロントエンドエンジニア、UI/UXデザイナー、またはCJKタイポグラフィのパフォーマンス問題に日常的に向き合うMacユーザーなら、WebFontはDockに常備する価値のある生産性ツールです。