| この記事の要点 |
|
このカテゴリについて
フォント形式は、文字の字形(グリフ)とメタ情報(ヒンティング、カーニング、合字、ウェイト等)を 1 ファイルにまとめたものです。種類は多くなく、現代では TTF / OTF(OS 用)と WOFF / WOFF2(Web 用)の 4 形式を押さえておけば実務で困ることはほぼありません。
WOFF2 は Brotli 圧縮を内蔵しており、TTF の約 60%、WOFF(1 世代前)の約 75% のサイズになります。すべてのモダンブラウザがサポートするため、@font-face の src は WOFF2 をメインに、フォールバックすら省略するのが現代の Web 制作の主流です。
フォントで扱う主な拡張子
| 拡張子 | 概要 |
|---|---|
.ttf | TrueType Font。Apple が開発し Microsoft にライセンス、最も普及 |
.otf | OpenType Font。TTF の拡張、CFF アウトラインも可 |
.woff | Web Open Font Format。zlib 圧縮 |
.woff2 | WOFF2。Brotli 圧縮、Web 標準 |
.ttc | TrueType Collection。複数フォントを 1 ファイルに |
.otc | OpenType Collection |
.eot | Embedded OpenType。IE 用(現代は不要) |
.dfont | macOS のリソースフォーク形式 |
.pfb / .pfm | PostScript Type 1(廃止予定、Adobe が 2023 にサポート終了) |
.afm | Adobe Font Metrics(メトリクス情報のみ) |
.bdf / .pcf | ビットマップフォント(X11 / 古い端末) |
用途別の使い分け
| 目的 | 推奨形式 |
|---|---|
| Web サイトに埋め込み | WOFF2(フォールバックに WOFF) |
| OS にインストール(Win/Mac/Linux) | TTF / OTF |
| Office・印刷 | OTF(CFF アウトライン) |
| サイズ最小化したいアイコンフォント | WOFF2 + サブセット化 |
| 1 ファミリーで複数ウェイト統合 | 可変フォント(.ttf / .otf) |
関連カテゴリ・記事
- ファイル拡張子とは(概論)
- Web・データ・設定 — @font-face の書き方
子ページ
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript で base URL を取得する方法|window.location.origin
- 4 YouTube Data API v3 エラー一覧|403・400・404 の原因と対処
- 5 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 6 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 7 Spring Frameworkのアノテーション一覧
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- djangoのテンプレートの作成とヘッダー・フッターの共通化 2026-10-03 21:41:49
- テンプレートフラグメント(ヘッダー等の共有化) 2026-10-03 21:41:49
- reCAPTCHA v3 使い方(サンプル付き) 2026-10-03 21:37:05
- Content-Type一覧|MIMEタイプとはとHTTPでの主な使用場面 2026-10-03 21:37:05
- SpringにおけるAOPの使い方 2026-10-03 21:37:05
- X (Twitter) API でツイートできないがエラーが出ない問題の原因と対処 2026-10-03 11:33:01
- X (Twitter) API アプリケーション登録完全ガイド|v2・Bearer Token・OAuth 2.0 PKCE 2026-10-03 11:33:01
- X (Twitter) API 完全ガイド|従量課金の料金・単価(2026年10月)と v2 移行 2026-10-03 11:32:40
- Google DeepMind とは?Gemini・AlphaFold の開発元 2026-10-03 11:26:56
- Cursor とは?AI 統合型コードエディタの使い方・料金 2026-10-03 11:26:56
- Claude (Anthropic) とは?AIチャットの使い方・モデルファミリ・API 2026-10-03 11:26:56
- AIベンダー一覧:OpenAI・Anthropic・Google DeepMind・Microsoft・Meta 2026-10-03 11:26:56
- クラウド・インフラ完全ガイド — AWS/Azure/GCP/Kubernetes 2026-10-03 11:26:56
- テキストエディタ完全比較 (VS Code / Cursor / Vim / Emacs / IDE) 2026-10-03 11:26:56
- プログラミング学習プラットフォーム|Scratch・micro:bit ほか 2026-10-03 11:26:56