Web とフォントのファイル拡張子ガイド：WOFF2、TTF、OTF、ICO
Web サイトの構築やデジタル製品のデザインにおいて、タイポグラフィやアイコンに適切なファイル形式を選択することは、視覚的な品質と読み込み速度の両方にとって重要です。古いフォント形式を使用すると、フォントの読み込み中にテキストが「見えない」状態になったり、サイトのパフォーマンスが大幅に低下したりする可能性があります。
このガイドでは、知っておくべき必須のフォントと Web グラフィックスの拡張子について解説します。
クイックリファレンス表：フォントと Web 形式
| 拡張子 | 正式名称 | 圧縮率 | 主な用途 |
|---|---|---|---|
.woff2 |
Web Open Font Format 2.0 | 非常に高い | 現代の Web（最高のパフォーマンス） |
.woff |
Web Open Font Format 1.0 | 高い | Web（レガシーブラウザのサポート） |
.ttf |
TrueType Font | 低い | Windows/macOS デスクトップ、基本的な Web |
.otf |
OpenType Font | 低い | グラフィックデザイン、高度なタイポグラフィ |
.svg |
Scalable Vector Graphics | 多様 | Web アイコン、ロゴ、ベクターアート |
.ico |
Icon | なし | ファビコン（ブラウザタブのアイコン） |
1. 現代の Web 標準 (.woff2)
WOFF2 は、今日の Web タイポグラフィにおけるゴールドスタンダードです。高度な圧縮アルゴリズム（Brotli）を使用して、フォントファイルを元の WOFF より最大 30% 小さくします。
- 長所: 読み込み時間が最短で、すべての現代的なブラウザでサポートされています。
- なぜ使うのか？ 現代のブラウザ（Chrome、Firefox、Safari、Edge）のみを対象とする場合、CSS の
@font-faceに含める必要があるのは.woff2形式だけです。
2. レガシーサポート (.woff)
WOFF2 の前身です。現在も広くサポートされていますが、効率は劣ります。
- なぜ使うのか？ WOFF2 をまだ解釈できない少し古いブラウザをサポートする必要がある場合のフォールバックとして使用します。
3. デスクトップとデザインの標準 (.ttf, .otf)
これらは、Word、Photoshop、Figma などで使用するためにコンピュータにインストールする形式です。
- TTF (TrueType): 1980年代に Apple と Microsoft によって開発されました。一般的な用途で最も一般的な形式です。
- OTF (OpenType): TTF をベースに構築されていますが、合字（リガチャ）、スモールキャップ、代替グリフなどの高度な「OpenType 機能」をサポートしています。デザイナーは、ハイエンドの印刷物やデジタル作品に OTF を好んで使用します。
- Web での使用: これらを Web で使用することも可能ですが、非圧縮で重いため、まず WOFF2 に変換することをお勧めします。
4. スケーラブルなグラフィックス (.svg)
文字の集合であるフォントとは異なり、SVG はベクター画像形式です。
- ロゴとアイコン: SVG は、どれだけズームしてもぼやけないため、ロゴに最適です。
- CSS での使用: SVG を背景画像として使用したり、「SVG フォント」として使用したりすることもできます（ただし、後者は現在 WOFF2 に取って代わられ、ほとんど非推奨となっています）。
5. ファビコン (.ico)
.ico 形式は、単一のファイル内に異なるサイズ（16x16、32x32、48x48）のアイコンの複数のバージョンを保持できる特殊なコンテナです。
- 主な用途: ブラウザのタブに表示される「ファビコン」。
- 現代的な代替案: ほとんどの現代的なブラウザはファビコンとして PNG や SVG をサポートしていますが、
.icoは依然として最も互換性の高いフォールバックとして残っています。
Web タイポグラフィのベストプラクティス
- WOFF2 を優先する: 現代のブラウザが最小のファイルを取得できるように、CSS では常に
.woff2を最初に記述します。 - フォントのサブセット化: 多くのフォントファイルには、使用しない何百もの言語の文字が含まれています。フォントを「サブセット化」すると、使用しない文字が削除され、ファイルサイズがさらに縮小されます。
font-display: swapを使用する: これにより、カスタムフォントの読み込みが完了するまで、システムフォントを使用してテキストがすぐに表示されるようになります。
よくある質問 (FAQ)
Q: .ttf をオンラインで .woff2 に変換できますか？
A: はい！デスクトップ用の .ttf や .otf ファイルを取り込んで、Web 対応の .woff2 ファイルに圧縮してくれる無料ツールがたくさんあります。
Q: WOFF2 は OTF のすべての機能をサポートしていますか？
A: はい。WOFF2 は本質的に、非常に効率的な圧縮レイヤーでラップされた OTF または TTF ファイルです。元のファイルのすべてのタイポグラフィ機能（合字など）を保持します。
Q: Web サイトのアイコンに SVG を使用すべきですか？
A: 一般的には、はい。SVG は鮮明で、透明度をサポートし、CSS でスタイルを設定できます。複雑なアイコンセットの場合、一部の開発者は「アイコンフォント」（.woff2 ファイルを使用）を好みますが、インライン SVG が現代のベストプラクティスと見なされています。
Tool3M の関連ツール
- 単位変換器: ピクセル (Pixels)、EM、REM の間でフォントサイズを計算します。
- 画像から Base64 へ: 小さな SVG アイコンを CSS や HTML に直接埋め込みます。