TTF・OTFをWOFF2に変換する方法｜日本語Webフォントを必要な文字だけ軽量化

1. WOFF2変換とサブセット化の違いを知る

TTF・OTFは元のフォントファイル形式、WOFF2はWeb配信向けの圧縮フォント形式です。W3Cが仕様を公開しており、CSSの@font-faceで読み込めます。

サブセット化は、フォント全体ではなく、使う文字に関係する字形などを残す処理です。Font SubsetterはTTF・OTFを指定文字のWOFF2にするツールで、すべての文字を保持するだけの汎用形式変換とは用途が違います。

まず、手元のファイルが生成元として使える形式か確認してください。

2. TTF・OTFフォントを読み込む

「フォント軽量化」を開き、WOFF2にしたい.ttfまたは.otfファイルを追加します。Regular・Bold・Italicなど複数の書体をまとめて追加しても構いません。

生成できるフォントは1ファイル100MB以下、最大12ファイル、合計300MBまでです。読み込み後は、フォントごとの名前や状態を確認してください。

フォントの利用許諾もここで意識します。PCにインストールできるフォントでも、Webサイトに埋め込んだり再配布したりする権利があるとは限りません。

3. Webサイトで使う文字を集める

「文字」でサイトに掲載する文章を入力するか、TXT・Markdown・HTML・CSS・JavaScriptなどのローカルファイルを追加します。文字列は重複を除いた集合にまとめられ、複数のフォントへ同じ文字セットを適用できます。

日本語プリセットには、ひらがな、カタカナ、基本記号、常用漢字2,136字などがあります。最初は実サイトの文章と必要なプリセットを組み合わせると、英数字や日本語の不足を減らしやすくなります。

人名・地名・異体字・記号、ユーザーが後から入力する文章などは、常用漢字プリセットだけでは揃いません。公開予定の本文だけでなく、ボタンやエラー文言、将来表示される可能性のある文字も考えてください。

4. 不足文字を生成前に確認する

「フォントの文字対応」を開き、各フォントが要求した文字をどこまで持っているかを確認します。Font Subsetterはフォント内部のcmapを読み、不足文字とUnicodeコードポイントを表示します。見た目だけで判断すると、ブラウザの別フォントによる代替表示を見落とすことがあります。

不足文字がある場合も生成自体は可能ですが、その文字は生成WOFF2には入りません。必要なら別のフォントへ切り替えるか、文章・文字セットを見直してから進めます。

確認結果を残したい場合は「文字対応レポートをコピー」を使えます。フォントごとの対応数と不足数を確認できますが、レポートは字形や文字組みの完全な動作保証ではありません。

5. Webフォントとして使えるライセンスか確認する

Font Subsetterはフォントに含まれるOS/2 fsTypeの制限情報と取得可能なライセンス情報を表示します。No SubsettingやBitmap Embedding Onlyの指定があるフォントは生成対象にできません。Restricted Licenseでは、必要な権利や許可があることを個別に確認する操作があります。

ただしfsTypeは技術的なフラグです。表示が制限なしでも、Webサイトへの掲載やフォントファイルの配布が許可されているとは限りません。必ず元フォントのライセンス文書やEULAを確認してください。

配布可否に不安がある場合は、権利関係が確認できるフォントを選ぶのが安全です。元のフォントがローカル処理されることと、出力WOFF2をWeb上に公開できることは別の話です。

6. 出力するフォント名・太さ・スタイルを設定する

「出力」で生成するフォントを選び、font-familyに使う名前、太さ（weight）、スタイル（style）、保存ファイル名を確認します。RegularとBoldを追加した場合は、それぞれの設定が用途どおりか見比べてください。

複数フォントには同じ文字セットを使って一括処理できますが、生成は1本ずつ順番に進みます。途中で1本が失敗しても、ほかの選択フォントの処理は続けられます。

対応するVariable Fontは可変情報を残してサブセット化できます。ただし、特定の軸の値へ固定した静的フォントを作る機能ではありません。

7. WOFF2を生成し、元フォントと見比べる

設定を確認してWOFF2の生成を実行します。成功したフォントを選ぶと、元のTTF・OTFと生成後のWOFF2を同じ文章・文字サイズで比較できます。

ファイルサイズだけでなく、よく使う漢字、句読点、数字、Boldの太さや特殊記号が意図した見た目になっているか確認してください。文字が表示されていても代替フォントになっている可能性があるため、先ほどの文字対応チェックも併せて使います。

軽量化率は元フォントと文字セットによって変わります。WOFF2という拡張子だけで一律に何％減るとは言えません。実際に生成されたファイルのサイズを確認しましょう。

8. 生成したCSSとWOFF2をWebサイトへ配置する

「CSSをコピー」またはWebfont PackageのZIP保存を使います。ZIPにはfontsフォルダー内のWOFF2、fonts.css、動作確認用demo.html、manifest.jsonが含まれ、元のTTF・OTFや入力した文章は入りません。

生成されたfonts.cssには@font-face、WOFF2への相対パス、font-display: swap、unicode-rangeなどが含まれます。fonts.cssとfontsフォルダーの相対位置を維持してWebサイトに配置し、ページのCSSからfonts.cssを読み込んでください。配置場所を変えたら、WOFF2の参照パスも直す必要があります。

公開後は実ページで文字が欠けないか、太字が正しく選ばれるか、ブラウザのネットワーク画面でWOFF2が取得できるか確認します。unicode-rangeは使用文字とフォントの対応範囲を指定するもので、後から追加した文字の字形を自動生成する設定ではありません。

9. 変換できない場合・公開後に文字が増えた場合

生成できないときは、元ファイルがTTF・OTFか、ライセンスやfsTypeで制限されていないか、対象文字が選択されているかを確認してください。WOFFは生成元には使えず、TTC・OTCのface選択にも対応していません。

文字ソースのファイルはUTF-8やBOM付きUTF-16などに対応しますが、Shift_JISを自動検出しません。日本語が正しく取り込めないときは文字コードを確認し、UTF-8などへ変換してから読み込み直してください。

記事の追加や利用者の入力によって新しい漢字が必要になったら、文字セットを更新してWOFF2を作り直します。元フォントと生成物を保管し、サイト側の更新と合わせて再確認すると、意図しない代替フォント表示を減らせます。

Font Subsetterの処理はブラウザ内で行われ、選んだフォントや文章を変換用サーバーへアップロードしません。Web版は最初のHTML取得だけ通信します。保存済みの単一HTMLは対応環境でオフライン利用できます。

注意点

• サブセット化は「サイトに今ある文字だけ」で固定しない方が安全です。動的に出る文言や人名も考慮してください。
• WOFF2はWeb配信用です。配布したZIPのfonts.cssとfontsフォルダーの相対位置を維持してください。
• 常用漢字プリセットに含まれない漢字もあるので、生成前の文字対応チェックを省略しないでください。
• フォントの著作権やWeb埋め込み可否は、fsType表示だけでなくライセンス文書を確認してください。
• 公開後の表示確認では、代替フォントで見かけ上読めているだけの文字もないか確かめます。