10.

TTF / OTF / WOFF / WOFF2 フォント形式の違いと Web 向けの使い分け

編集
この記事の要点
  • フォント形式: TrueType (.ttf) / OpenType (.otf) / Web Open Font Format (.woff/.woff2)
  • WOFF2 は Web 配信の事実標準。Brotli 圧縮で .ttf の約 60% サイズ
  • 可変フォント(Variable Font)は 1 ファイルでウェイト・幅・斜体を連続変化
  • 商用フォントはライセンス必須。@font-face での Web 埋め込みは特に確認
  • macOS の .dfont や Adobe の .afm など歴史的形式も残る

このカテゴリについて

フォント形式は、文字の字形(グリフ)メタ情報(ヒンティング、カーニング、合字、ウェイト等)を 1 ファイルにまとめたものです。種類は多くなく、現代では TTF / OTF(OS 用)と WOFF / WOFF2(Web 用)の 4 形式を押さえておけば実務で困ることはほぼありません。

WOFF2 は Brotli 圧縮を内蔵しており、TTF の約 60%、WOFF(1 世代前)の約 75% のサイズになります。すべてのモダンブラウザがサポートするため、@font-facesrc は WOFF2 をメインに、フォールバックすら省略するのが現代の Web 制作の主流です。

フォントで扱う主な拡張子

拡張子概要
.ttfTrueType Font。Apple/MS 共同開発、最も普及
.otfOpenType Font。TTF の拡張、CFF アウトラインも可
.woffWeb Open Font Format。zlib 圧縮
.woff2WOFF2。Brotli 圧縮、Web 標準
.ttcTrueType Collection。複数フォントを 1 ファイルに
.otcOpenType Collection
.eotEmbedded OpenType。IE 用(現代は不要)
.dfontmacOS のリソースフォーク形式
.pfb / .pfmPostScript Type 1(廃止予定、Adobe が 2023 にサポート終了)
.afmAdobe Font Metrics(メトリクス情報のみ)
.bdf / .pcfビットマップフォント(X11 / 古い端末)

用途別の使い分け

目的推奨形式
Web サイトに埋め込みWOFF2(フォールバックに WOFF)
OS にインストール(Win/Mac/Linux)TTF / OTF
Office・印刷OTF(CFF アウトライン)
サイズ最小化したいアイコンフォントWOFF2 + サブセット化
1 ファミリーで複数ウェイト統合可変フォント(.ttf / .otf)

関連カテゴリ・記事

編集
Post Share
子ページ
  1. TTF(.ttf)
  2. OTF(.otf)
  3. WOFF(.woff)
  4. WOFF2(.woff2)
  5. EOT(.eot)
  6. TTC / OTC(.ttc / .otc)
  7. PFB / PFM / Type 1(.pfb / .pfm)
  8. AFM / BDF / PCF(.afm / .bdf / .pcf)
同階層のページ
  1. ファイル拡張子とは
  2. テキスト・ドキュメント形式
  3. 画像形式
  4. 音声・動画形式
  5. アーカイブ・圧縮形式
  6. 実行ファイル・パッケージ
  7. プログラミング・スクリプト
  8. Web・データ・設定
  9. データベース・データ交換
  10. フォント
  11. システム・仮想化

最近更新/作成されたページ