フォントサブセット化ツール
不要な文字を削除し、必要な文字だけを含む
軽量なフォントファイルをブラウザで生成します。
1. フォントファイルの読み込み
フォントサブセット化ツールの概要
フォントサブセット化ツールは、TTF/OTF/WOFFなどのフォントファイルから、実際に使用する文字だけを抽出して新しい軽量なフォントファイルを作成する開発者向けツールです。特に日本語や中国語などのグリフ数が多いフォントにおいて、ファイルサイズを90%以上削減でき、Webサイトの表示速度(LCP等)の大幅な改善に貢献します。
本ツールはブラウザ上で動作する「opentype.js」を採用しており、フォントファイルが外部サーバーに送信されることは一切ありません。機密性の高い商用フォントでも完全にオフラインで安全に処理されます。
フォントサブセットの作り方・使い方
フォントの読み込み
画面上部のエリアに、軽量化したいフォントファイル(TTF/OTF等)をドラッグ&ドロップまたはクリックして選択します。
文字の選択
「対象文字」タブで、抽出したい文字のプリセット(ASCII、ひらがな等)を選択するか、テキストエリアに直接使用する文字を入力します。
実行とプレビュー
「サブセット実行」ボタンをクリックすると瞬時に処理が完了します。「プレビュー」タブで実際にどのように表示されるかを確認し、問題なければダウンロードしてください。
関連する用語集
- サブセット化
- フォントファイルから不要な文字(グリフ)データを削除し、実際に使用する必要な文字だけを残すことでファイルサイズを減らす技術です。主にWebフォントの読み込み速度向上のために用いられます。
- グリフ
- 文字の形状データのことです。一つのフォントファイルの中には、数千から数万のグリフが収録されていることがあります。日本語フォントでは漢字のグリフ数が多く、データサイズが肥大化しがちです。
- TTF (TrueType Font)
- AppleとMicrosoftが開発した標準的なアウトラインフォントフォーマットです。幅広い環境でサポートされており、デスクトップ用途からWeb用途まで幅広く使用されています。
- OTF (OpenType Font)
- AdobeとMicrosoftが共同で開発したフォーマットで、TTFの拡張版です。より高度なタイポグラフィ機能(リガチャや異体字など)をサポートしており、プロ向けのフォントで多く採用されています。
- WOFF / WOFF2
- Web Open Font Formatの略で、Webフォント向けに最適化(圧縮)されたフォーマットです。WOFF2はより高い圧縮率を誇り、モダンブラウザでのWebフォント配信に最適なフォーマットとされています。
よくある質問(FAQ)
- Q.どのくらいファイルサイズが小さくなりますか?
- 抽出する文字数によりますが、数万字収録されている日本語フォントから数百文字だけを抽出した場合、数MBのファイルが数百KB(90%以上の削減)になることも珍しくありません。
- Q.アップロードしたフォントはサーバーに保存されますか?
- いいえ、保存されません。すべての処理はブラウザのJavaScript (opentype.js) を用いてお使いのPC内で完結するため、機密性の高い商用フォントでも安全にご利用いただけます。
- Q.サブセット化したフォントを商用利用できますか?
- 本ツール自体はサブセット化の処理を行うだけです。出力されたフォントの利用可否は、元となるフォントのライセンス規約に依存します。商用利用可能か、またサブセット化などの改変が許可されているか、元のフォントの利用規約を必ずご確認ください。
- Q.WOFF2出力に対応していますか?
- 本ツールではTTF形式で出力します。WOFF2等への変換は別途専用ツールをご利用ください。
- Q.文字化けを防ぐにはどうすればいいですか?
- サロゲートペアなどの特殊な文字が含まれる場合は手動で追加文字に確実に入力してください。
活用シーン
フォントサブセット化が効果を発揮する代表的なシーンをご紹介します。
Webサイトの表示速度改善(Core Web Vitals)
数MBもある日本語Webフォントをそのまま読み込むと、テキストが表示されるまでの時間(LCPやFCP)が大幅に遅延します。
活用法: サイト内で実際に使用しているひらがなや常用漢字のみにサブセット化することで、ファイルサイズを数百KBまで圧縮し、高速な描画を実現できます。
モバイルアプリ・ゲームへの組み込み
スマートフォン向けアプリやゲームでは、ダウンロード容量の制限やストレージ節約のためにリソースの軽量化が常に求められます。
活用法: アプリ内のUIや固定テキストで使用する文字のグリフだけを抽出したフォントをバンドルすることで、アプリ全体のサイズを削減できます。
LP(ランディングページ)でのデザインフォント利用
キャンペーンLPなどで、キャッチコピーや見出しに特殊なデザインフォントを使用したいが、ページロードは最速にしたい場合。
活用法: キャッチコピーに含まれる特定の数十文字のみをサブセット化した超軽量フォントを作成し、一瞬で表示される美しいタイポグラフィを実現します。
HTMLメールや電子書籍への埋め込み
外部リソースの読み込みに制限があるHTMLメールや、ファイルサイズがシビアなEPUB等の電子書籍において、フォントの埋め込みは容量を圧迫します。
活用法: 必要な文字セットに限定したサブセットフォントをBase64などで埋め込むことで、容量制限をクリアしつつ独自のフォント表現が可能になります。
本ツールの技術解説
opentype.jsによるクライアントサイドでのフォント操作
本ツールは、オープンソースライブラリ「opentype.js」を利用して実装されています。フォントファイルのパース(解析)、グリフ(文字形状データ)の抽出、そして新しいフォントファイルの生成(再構築)までの全プロセスを、WebブラウザのJavaScript上で完結させています。
サーバー側でフォントファイルを処理する仕組みと異なり、大容量のフォントファイルのアップロード・ダウンロード時間を省略できるため処理が高速であり、かつユーザーの機密情報を含む商用フォント等が外部に漏れるリスクを根絶しています。
フィードバックを送信
ツールをより良くするためのご意見をお聞かせください。
現在、フィードバックの受付を一時停止しています
サーバーが混み合っているか、スパム防止のための安全装置が作動しています。しばらく経ってから再度アクセスしてください。