TTF vs OTF vs WOFF2: フォント形式の比較
3つの形式の簡単な歴史
TrueType（TTF）は、1989年にAppleとMicrosoftの共同開発によって生まれました。その目的は、OSが直接フォントのレンダリングを制御できるようにし、AdobeのPostScriptライセンスへの依存を断ち切ることでした。TTFファイルは、グリフのアウトラインを2次ベジェ曲線として保存し、メトリクス、ヒンティング情報、カーニングテーブルなどすべてを単一のバイナリにまとめます。90年代のほとんどの期間、TTFはWindowsとmacOSの両方でデスクトップフォントの undisputed king（議論の余地のない王者）でした。 次に登場したのが、1996年のOpenType（OTF）です。Microsoftが開発し、すぐにAdobeも加わりました。OpenTypeはゼロから作るのではなく、TrueTypeのコンテナを巧みに拡張したものです。OTFファイルは、TrueTypeの2次曲線か、Adobeの3次PostScript曲線（CFFアウトライン）のどちらでも使用できます。そのため、「CFFベースのOTF」という言葉を目にすることがあるのです。さらに重要なのは、この形式が合字（リガチャ）、スモールキャップス、スワッシュ、文脈依存の代替字形といった機能を可能にする強力なレイアウトテーブル（GSUBとGPOS）を導入したことです。アラビア語のような複雑な書体向けの洗練されたOTFには、何千ものグリフ置換ルールが含まれていることもあります。 WOFF2（Web Open Font Format 2）は、まったく異なる土俵で勝負しています。2018年にW3C勧告として承認されたこの形式は、新しいアウトライン形式ではなく、超効率的な圧縮ラッパーです。既存のTTFやOTFをBrotli圧縮とフォントに特化した特別な前処理にかけて、多くの場合30～50%も小さいファイルを出力します。WOFF2はウェブでの配信専用に作られました。ブラウザがオンザフライで解凍するため、OSのフォントマネージャーに認識されることすらありません。この違い—アウトライン形式か、それとも配信形式か—を理解することが、これらの使い方を把握する鍵となります。
ファイルサイズと圧縮：本当に重要な数字
生のファイルサイズは、ページの読み込み時間、アプリのバンドルサイズ、CDNの帯域コストといった痛いところに直接響きます。具体的な数字を見てみましょう。Source Sans Pro Regularのような中程度に複雑なラテン文字書体は、TTFで約260KBです。より効率的なCFFアウトラインを使ったOTF版は約155KB。これは、CFFの3次曲線がTrueTypeの2次曲線よりも少ない点で形状を記述できることが多く、ラテン文字書体ではCFFベースのOTFが20～40%小さくなるためです。さて、同じフォントをWOFF2に変換すると、約75KBのファイルになります。これは元のTTFから71%もの大幅な削減です。 CJK（中国語、日本語、韓国語）フォントでは話が変わってきます。Noto Sans CJK SCのようなフルカバーのCJK TTFは20MB以上に膨れ上がることがあります。WOFF2圧縮は助けになりますが、せいぜい13～15MBに減る程度で、銀の弾丸ではありません。巨大なフォントに対する真の解決策はサブセット化であり、これは単なる形式変換とは別のプロセスです。WOFF2だけでは65,000グリフを持つフォントは救えません。 WOFF（バージョン1）については、もはや博物館行きです。zlib圧縮を使用しており、WOFF2に完全に取って代わられました。caniuse.comによると、WOFF2のサポートは2024年には世界のユーザーの97%以上に達し、あなたが気にするすべてのモダンブラウザをカバーしています。唯一の例外は、Internet Explorer 11をまだ実行している古い組み込みブラウザやキオスク端末くらいでしょう。どんな新しいウェブプロジェクトでも、WOFF2は最良の選択というだけでなく、唯一の賢明な選択です。
OpenTypeの機能：OTFがTTFより純粋に優れている点
優れたOTFとTTFの最も重要な技術的違いは、高度なOpenTypeレイアウト機能へのアクセスです。両方のファイルタイプが技術的には必要なGSUB（グリフ置換）とGPOS（グリフ位置調整）テーブルを含むことができますが、プロのフォント制作会社（タイプファウンドリ）は、その豊富な機能セットをほぼ例外なくOTF版に組み込んでいます。現実世界では、良い機能はOTFに入っているのです。 これらの機能は実際に何をするのでしょうか？合字（リガチャ）は、「fi」や「fl」のような一般的な並びを、衝突を防ぐために完璧に作られた単一のグリフに置き換えます。デザイン合字はさらに進んで、「ct」や「Th」のようなペアをカリグラフィックな趣で巧みに組み合わせます。スモールキャップスは、フルハイトの大文字を、光学的にサイズ調整された小さいバージョンに置き換えます。これらは単に縮小された文字ではなく、再描画されたグリフです。オールドスタイル数字は、アセンダーやディセンダーを持つ数字を提供し、テキストの行に美しく溶け込ませます。Minion Proのような書体の単一のOTFファイルには、1,700以上のグリフと、「onum」「smcp」「calt」「swsh」「hist」といったタグが付けられた何十もの機能が含まれている場合があります。 CSSでは、`font-feature-settings: 'onum' 1;` や `font-variant-numeric: oldstyle-nums;` でこれらを有効にします。Adobe InDesignでは、「書式」メニューの「OpenType」の下にあります。Microsoft Word 365でさえ、高度なフォントダイアログで一部サポートしていますが、Adobeのツールほど包括的ではありません。 これらのテーブルを持たないTTFファイルは、アプリケーションに関係なく、これらの機能を一切提供しません。もしあなたのデザインが、適切なスモールキャップス、文脈依存の代替字形、あるいはアラビア語やデヴァナーガリーのような書体で要求される複雑な字形形成に依存しているなら、OTFは単なる好みではなく、必須条件なのです。
ヒンティングとレンダリング：デスクトップとスクリーンの文脈
フォントのヒンティングとは、フォントファイル内の一連の命令で、スクリーン上の小さいサイズでもシャープに見えるようにグリフのアウトラインを調整するものです。ぼやけた12pxのテキストを目を細めて見たことがある人なら誰でも、レンダリングが悪いことの苦痛を知っています。ヒンティングはその治療法です。ヒンティングがないと、小文字「n」の垂直なステムの一方が1ピクセル幅で、もう一方が2ピクセル幅になり、醜く不均一な見た目になります。良いヒンティングは、それらのストロークをピクセルグリッドに揃えます。 TTFフォントは、手作業によるTrueTypeヒンティングで有名です。これは複雑なバイトコード言語で、デザイナーがすべてのピクセルを細かく制御できるようにします。これは非常に手間のかかる作業で、Arialのように完全に手作業でヒンティングされたフォントは何百時間もの作業を要します。その見返りは、GDIレンダラーを使用する古いWindowsシステムでは絶大でした。 CFFベースのOTFフォントは、よりシンプルなPostScriptヒンティングを使用します。ヒンティングをほとんど無視するレンダラーを長年使用してきたmacOSでは、この違いは問題になりません。Windowsでは、ClearTypeレンダラー（Vista以降のデフォルト）がその差をかなり縮めました。そして高DPIディスプレイ、つまり現代のほとんどのスマートフォンや「Retina」スクリーンでは、ヒンティングはほとんど無関係になります。ピクセルが単純に小さすぎて、グリッドへの整列問題が発生しないのです。 WOFF2はヒンティングの話を変えるものではなく、圧縮した元のフォントのヒンティングデータをそのまま保持します。うまくヒンティングされたTTFを変換すれば、そのヒントも一緒に付いてきます。実践的な結論は？もしあなたの主要ユーザーが非HDのWindowsモニターを使っていて、16px以下のテキストを表示する場合、手作業でヒンティングされたTTFにはまだ目に見える利点があります。しかし、現代のハードウェアでのウェブ利用においては、その違いを見分けるのはほとんど不可能です。
各形式の使い分け：実践的な判断ガイド
デスクトップへのインストール、つまりOS、デザインアプリ、オフィススイートで使う場合は、TTFかOTFのどちらかが必要です。WindowsとmacOSは両方をネイティブでサポートしており、Linuxディストリビューションも同様です。どちらを選ぶかはあなたのニーズ次第です。InDesignで合字やスワッシュなどの高度なタイポグラフィ機能が必要なデザイナーなら、OTFが欲しいでしょう。企業のフォントを多数のWindowsマシンに展開するIT管理者なら、ヒンティングされたTTFの方が安全で互換性の高い選択肢となることが多いです。 ウェブでの配信はシンプルです：WOFF2。話は以上です。CSSの`@font-face`宣言では、常にWOFF2を最初にリストすべきです：`src: url('font.woff2') format('woff2'), url('font.woff') format('woff');`。生のTTFやOTFファイルをウェブ経由で提供するのはパフォーマンス上の犯罪です。ユーザーに必要以上の2～3倍のデータをダウンロードさせていることになります。もし古いテーマのスタイルシートで.ttfが参照されているのを見つけたら、それをWOFF2に交換するのは手軽で効果的なパフォーマンス改善策です。 モバイルアプリはまた別の文脈です。iOSとAndroidはどちらもアプリパッケージ内にバンドルされたTTFやOTFファイルをネイティブで使用します。WOFF2はブラウザ専用の配信形式なので、この目的では使われません。FlutterアプリはTTFやOTFをassetsディレクトリにバンドルし、`pubspec.yaml`で宣言します。React Nativeも同様のパターンです。 ゲームエンジンには独自の好みがあります。UnityのTextMeshProはOTFとTTFを使ってフォントアセットを生成します。Unreal EngineのインポーターはTTFを好みます。どちらもWOFF2ファイルを直接インポートしないので、もしWOFF2ファイルしか持っていない場合は、先にTTFかOTFに変換し直す必要があります。
CocoConvertを使った形式変換
これらの形式を切り替える必要がありますか？CocoConvertは最も重要な変換パスを扱います：TTFからWOFF2、OTFからWOFF2、WOFF2からTTF、そしてOTFからTTFへも変換できます。私たちのプロセスは、Google Fontsでも使われている業界標準のPythonライブラリ`fonttools`によって支えられています。これにより、変換後のファイルが標準に準拠し、GSUB、GPOS、nameレコード、ヒンティングデータといったOpenTypeテーブルが保持されることが保証されます。 ウェブ用のフォントを作成するには、私たちのフォント変換ページで.ttfファイルをアップロードし、出力としてWOFF2を選んで「変換」をクリックするだけです。一般的なラテン文字フォントなら数秒で処理されます。出来上がったWOFF2ファイルは、元のフォントのメトリクスやレイアウト機能をすべて保持し、デフォルトでは何も削除されません。 もちろん、CocoConvertがすべてを行うわけではありません。サブセット化は行いません。20MBのCJKフォントを変換すると、圧縮された13MBのWOFF2ファイルが得られますが、必要な文字だけを含む50KBの軽量ファイルにはなりません。そのためには、`pyftsubset`のような専用ツールが必要です。また、CocoConvertはライセンスメタデータを変更しません。フォントの埋め込みフラグ（fsType）がウェブでの使用を制限している場合、そのフラグは変換後のファイルにも残ります。覚えておいてください：フォントを変換しても、そのライセンスが変わるわけではありません。ウェブでフォントを使用する権利がない場合、それをWOFF2に変換しても合法にはなりません。 ウェブフォントを見つけてデスクトップで使いたい場合、WOFF2をTTFに戻す変換は非常に便利です。この解凍はロスレスであり、結果として得られるTTFのアウトラインデータは元のソースとバイト単位で同一です。この変換はWOFF2特有の最適化をクリーンに元に戻し、完全に使えるデスクトップファイルを提供します。
まとめ：考えすぎずに適切な形式を選ぶ
要点を整理しましょう。これら3つの形式は、互換性のある代替品ではありません。それぞれが異なる仕事のための、異なるツールなのです。 TTFはユニバーサルアダプターです。フォントを扱うあらゆるプラットフォームがTTFを処理できます。最大限の互換性が必要な場合、その特殊なヒンティングが活きる古いWindows環境をターゲットにする場合、あるいはゲームエンジンのようなツールがそれを要求する場合に正しい選択です。主な弱点は、CFFベースのOTFに比べてファイルサイズが大きく、通常は高度なタイポグラフィ機能に欠けることです。 OTFはデスクトップ作業におけるプロの選択です。タイプファウンドリが本格的なデザイン用にフォントを販売する場合、あなたが欲しいのはOTF版です。完全なOpenType機能セットを含み、CFFアウトラインはコンパクトで、すべてのモダンなデザインアプリがサポートしています。唯一の現実的な欠点は、ウェブ配信には大きすぎることです。生のOTFをHTTP経由で提供するのは帯域の無駄です。 WOFF2はただ一つ、ウェブのためだけのものです。これは新しい種類のフォントではなく、既存のフォントをブラウザ用に見事に圧縮したものです。`@font-face`ルールではWOFF2を使いましょう。常にです。元のTTFやOTFをソースファイルとして保持し、WOFF2は配信用の、使い捨ての最適化されたアセットとして扱います。 どんな新しいプロジェクトでも使えるシンプルなワークフローはこうです：ファウンドリから高品質のOTFフォントを入手する。CocoConvertを使ってウェブサイト用のWOFF2版を作成する。元のOTFは印刷物やデザイン作業のために保管しておく。そして、もしWOFF2ファイルしかなくてデスクトップで必要になった場合は、それをTTFに変換し直す。実にシンプルです。