TTF・OTF・WOFFの違い｜インストール用とWeb用の選び方

TrueTypeは4つの中で最も古い形式です。1991年にAppleがSystem 7で搭載し、翌年にMicrosoftがWindows 3.1で採用しました。TrueTypeフォントは、すべての文字を2次曲線で記述します。2次曲線は曲線1区間につき制御点が1つで、初期のハードウェアでも軽く描画できました。ヒンティングも含まれます。これはフォント内の小さなプログラムで、線や曲線をピクセルグリッドに合わせ、低解像度の画面でも文字をくっきり見せます。.ttf拡張子は、今もこの2次曲線のアウトラインを持つフォントを示します。

OpenTypeは1996年にMicrosoftとAdobeが発表した形式で、新しい種類のアウトラインではなく「入れ物」です。TrueTypeのアウトラインも、CFFテーブルに格納されたPostScriptアウトラインも収められます。後者は1区間につき制御点が2つの3次曲線を使います。アウトラインに加えて、高度なタイポグラフィ用のレイアウトテーブルがあり、標準合字・任意合字、スモールキャップ、オールドスタイル数字、スタイルセット、文脈依存の代替字形、カーニングに対応します。慣例として、CFFベースのOpenTypeフォントは.otfで保存され、TrueTypeアウトラインのOpenTypeフォントは.ttfのままです。

WOFFとWOFF2はWeb向けに作られた入れ物です。WOFFは2009年に草案が作られ、2012年にW3C勧告となり、各フォントテーブルをzlibで圧縮します。WOFF2は2018年にW3C勧告となり、Brotliに切り替え、グリフデータを先に前処理することで、WOFFより通常約30%小さくなります。ほかに3つの関連形式があります。EOTはInternet Explorer独自のWeb形式、SVGフォントはSafariだけが対応した初期の間に合わせ、バリアブルフォントは2016年にOpenType 1.8で追加され、ウェイトや幅の範囲をまるごと1ファイルに収めます。

インストールするのはTTFでもOTFでもかまいません。どちらにするかで悩む必要はありません。Windows 10と11では右クリックしてインストールを選べば両方入り、macOSではどちらもFont Bookで開け、LinuxデスクトップではフォントキャッシュがOLD更新されると~/.local/share/fontsから読み込まれます。Word、Photoshop、Figmaのデスクトップアプリ、Affinity、LibreOfficeも両方に対応しています。同じファミリーがOTFとTTFの両方で届いた場合、OTFはたいていフォントデザイナーが描いた元のバージョンで、TTFは古いソフト向けに作られた変換版です。

違いが問題になるのは限られた場面です。一部のカッティングマシンや刺繍ソフト、ゲームエンジン、マイコン向け表示ライブラリはTrueTypeのアウトラインしか扱えないため、CFFベースのOTFは正しく表示されず、OTFをTTFに変換する必要があります。逆に、WOFFやWOFF2はブラウザ向けに圧縮されたファイルなので、デスクトップに直接インストールすることはできません。同じファミリーはどちらか一方だけをインストールしてください。内部名が同じTTFとOTFがあると、フォントメニューが混乱し、アプリが意図しない方を選ぶことがあります。

現行のChrome、Edge、Firefox、SafariはすべてWOFF2を読み込めるので、@font-faceルールの最初の、そして多くの場合唯一のソースにできます。WOFFの行をその後ろに追加するのは、アクセス解析に2016年より前のブラウザ(古いAndroid WebViewや組み込みテレビのブラウザなど)がまだ表示される場合だけで十分です。ブラウザはsrcの一覧を順に見て、最初に対応している形式をダウンロードします。そのため、予備を用意しても最新ブラウザの訪問者に負担はかかりません。デスクトップ用のTrueTypeファイルが手元にあるなら、TTFをWOFFに変換すれば、その予備を一度で作れます。

プラットフォームの都合で必要になる場合(一部のメール作成ツールや古いCMSなど)を除き、TTFやOTFをそのままサイトで配信するのは避けてください。ブラウザは問題なく表示しますが、サーバーでフォントをgzip圧縮していなければ無圧縮のまま転送され、誰でもそのままインストールできるデスクトップ用コピーを手に入れられてしまいます。下のfont-display: swapの行は、フォントが届くまで最大3秒間テキストを隠す代わりに、すぐ代替フォントで表示し、届いたら切り替えるようブラウザに指示します。

可能なら、ファイルは自分のドメインに置いてください。Chrome、Safari、Firefoxはキャッシュをサイトごとに分離するようになったため、共有CDNから取得したフォントはサイト間で再利用されません。自前でホストすれば、DNS検索と接続も1回分省けます。<link rel="preload">は、ファーストビューで使う1〜2つのウェイトにだけ付けてください。すべてのスタイルをプリロードすると、画像と帯域を奪い合います。

ラテン文字の本文用ウェイト1つをWOFF2で保存すると、通常20〜60 KBです。同じフォントを無圧縮のTTFにすると2〜3倍になることが多く、ギリシャ文字、キリル文字、ベトナム語にも対応したファミリーでは1スタイルで200 KBを超えることもあります。中国語・日本語・韓国語のフォントは桁が違います。CJKのフルウェイトには数万のグリフが含まれ、WOFF2で圧縮しても通常は数MBになり、ページがテキストを表示する前に読み込むには大きすぎます。

サブセット化は、ページで使わない文字を取り除く方法です。unicode-rangeは、ファイルがどの文字をカバーするかをブラウザに伝えるので、ページにその文字が実際に含まれるときだけダウンロードされます。Google FontsはCJKでまさにこの方法を使い、各ファミリーを多数の小さな断片に分けて必要に応じて読み込みます。自分のフォントの場合は、フォント変換の残す文字オプションで、サーバーに置く前にLatin + accentsまたは入力した文字のみに絞れます。パソコンにインストールするフォントにはすべての文字を選んでください。

TTFとOTFの相互変換は、TrueTypeアウトラインのフォントでは入れ物の変更にすぎません。アウトラインテーブル、メトリクス、レイアウト機能はそのまま移ります。問題になるのは、CFFベースのOTFをTTFにする場合です。3次曲線は2次曲線のアウトライン形式にそのままコピーできないため、各曲線は1ピクセルよりはるかに小さい許容誤差の範囲で、1つ以上の2次曲線に描き直されます。PostScriptのヒントも変換できません。そのため、OTFからTTFへの変換ツールではヒンティングを「保持」「削除」自動ヒントから選べます。

Web用からデスクトップ用に戻す変換は、最もよくあるケースです。テーマやデザインキットをダウンロードしたら.woffや.woff2しかなく、WordやFigmaで使いたい、という場合です。WOFFをTTFに変換すると、圧縮を解いて元のテーブルを書き出すため、グリフ、カーニング、機能は入力時と同じになります。復元できないのは、Web版で既に失われたものです。サブセット化で除かれた文字や、容量節約のために削られたヒントなどがそれにあたります。

変換の問題の多くは、ヒンティング、レイアウト機能、バリアブル軸の3つに行き着きます。下の一覧は、変換後に気づきやすい症状と、それぞれのよくある原因です。

フォントファイルは小さなデータベースで、3つの部分を見ればたいていの疑問に答えられます。nameテーブルには、ファミリー名、スタイル名、バージョン、著作権表記、多くの場合ライセンスのURLが入っています。macOSのFont Bookでは情報ビューに表示され、Windowsのフォントプレビューでは最初の数行が表示されます。グリフの対応範囲を見れば、そのフォントが組める言語がわかります。ラテン文字のみのフォントは、ポーランド語、トルコ語、ベトナム語で足りない文字を、気づかないうちに別の書体で代用します。バリアブルフォントでは、fvarテーブルに軸の一覧(ウェイトが100〜900、幅が75〜125など)が載っています。

公開する前に、ライセンスは一度確認する価値があります。商用のファウンドリーは、デスクトップ用、Web用、アプリ用のライセンスを別々に販売していることが多く、デスクトップ用ライセンスは通常、決まった台数のパソコンへのインストールまでを認め、Webサイトの訪問者への配信やモバイルアプリへの同梱は認めていません。フォントを変換しても変わるのはファイル形式だけで、ライセンスは変わりません。デスクトップ用TTFから作ったWOFF2には、元のTTFと同じ条件が適用されます。Google Fontsの大半が採用しているSIL Open Font Licenseのフォントは、変換、サブセット化、自前ホストが可能です。

フォントの疑問の多くは、ファイルをどこに置くかに行き着きます。パソコンにインストールするか、アプリに同梱するならTrueTypeかOpenType、ブラウザがダウンロードするなら圧縮されたWeb用の形式を使います。下の表は、よくある用途ごとに選ぶ形式と、そこへ至る変換をまとめたものです。歴史を飛ばして、必要なファイルにすぐたどり着けます。

2つの用途は、分類の境目にあります。EPUB 3はTTF、OTF、WOFFを受け付けるので、電子書籍ではどちらの系統の形式も使えます。SVGフォントはベクター画像と同じ系譜に属しますが、現在ではブラウザではなく、一部のプロッターや彫刻ソフトで主に使われます。