otfとwoffの違いを完全解説｜初心者にも分かる使い分けガイド

---

otfとwoffの基本的な違いを理解しよう

OTFはOpenTypeフォントの略で、アウトラインデータと呼ばれる文字の形を指示する情報を格納するフォーマットです。紙の印刷やデジタルアプリで長年使われてきた標準の形式で、TrueTypeとPostScriptという2つの流派が組み合わさっています。OTFにはヒント情報と呼ばれる微妙な調整データが含まれ、表示の際に文字の形が崩れにくいよう工夫されています。これに対してWOFFはWeb Open Font Formatの略で、主な目的はウェブ上でのフォント配信を軽くすることです。つまりOTFは印刷物やオフライン表示向けの安定性を重視し、WOFFはウェブ上での読み込み速度を重視した設計が基本です。

WOFF/WOFF2は元のフォントデータを圧縮してネットワーク越しに送る仕組みです。WOFFはgzipと同様の圧縮を使い、OTFやTTFの情報を包んでファイルサイズを小さくします。WOFF2はより新しいアルゴリズムを使い、同じ文字集合であってもさらに小さくなることが多く見られます。ウェブサイトのパフォーマンスを考えると、WOFF2を第一候補として使うのが現在の主流です。ただし、フォントのライセンス条項をWeb埋め込みに対応しているかは必ず確認してください。ライセンス次第で、ウェブ上での配布自体が制限されてしまうからです。

互換性と用途の違い

OTFとWOFF/WOFF2はどんな場面で適していますか？OTFは印刷物、PDF、デスクトップアプリ、オフラインの表示で安定した描画を提供します。WOFFとWOFF2はウェブサイトのフォントとして設計され、ブラウザがデコードして表示します。現代のほとんどのブラウザはWOFF/WOFF2を読み込む能力を持っており、オンラインでのフォント配布の標準として広く使われています。
ただし、OSに組み込まれているOTFフォントをそのままウェブに使うと、ライセンスや配布権の問題が生じることがあります。

ライセンス面の違いも重要です。OSに入っているOTFフォントはシステムフォントとして使われますが、ウェブ上での再配布や埋め込みには別のライセンスが必要です。WOFF/WOFF2はウェブ配布用のライセンスが必要になることが多く、商用サイトではウェブフォントライセンスを取得するか、Google Fontsのような公開ライセンスのフォントを使うのが手っ取り早いです。ライセンスの確認を最優先にしてください。

実務での使い分けのコツ

実務の基本はウェブ用にはWOFF2を第一選択とすることです。CSSの@font-faceを使い、src:url('path/fonts/font.woff2') format('woff2');と指定します。サイト全体を統一する場合はファイルを1つか2つに絞り、管理を簡潔にします。印刷物やデスクトップアプリ向けにはOTFを別途用意するのが一般的です。ライセンスと技術要件を満たす計画を立てることが重要です。

パフォーマンスをさらに高めるコツとして、フォントのサブセット化（必要な文字だけを抽出してファイルサイズを削減）と、複数ファイルを避けて1つの軽量ファイルに統一する工夫があります。font-display: swap を使えばフォントが読み込まれるまでの表示が乱れず、ユーザー体験が向上します。実務ではこの他にも遅延読み込みやCDNの活用、適切なキャッシュ設定など総合的な最適化が求められます。
結局のところ、ウェブの速度とライセンスの両面を考慮して選択することが最も大切です。

able>形式OTFWOFF/WOFF2主な用途印刷・デスクトップ・オフラインウェブ配信・オンライン表示圧縮なしあり（WOFF/WOFF2）サポート幅広いアプリで可主に現代ブラウザで可、WOFF2推奨ライセンス注意個別ライセンス次第ウェブ向けライセンスの確認必須ble>

ピックアップ解説

ところで、WOFF2の話をすると友達とついこの前も雑談になりました。ブラウザがフォントを読み込むとき、従来のOTFファイルをそのまま送るより、WOFF2に圧縮するとページの読み込みが速くなるって知ってましたか？私が自分のサイトを作っていたとき、初めてCSSのfont-faceを使ってfont-displayを設定したとき、読み込みが遅い原因がフォントファイルの大きさだと気づいたんです。WOFF2は同じフォントデータを小さくするので、端末がつまずくことが減ります。とはいえ、ライセンスと互換性の問題はいつも頭の片隅に置く必要があります。

---