Web Open Font
フォントWOFFはWeb配信用のフォント容器です。OSへ普通のフォントとして入れる用途とは区別し、CSSの@font-faceから参照して使います。ファイルが存在していても、URL、CORS、書体名、太さ、日本語グリフが合わないと期待どおり表示されません。Web埋め込みを許すライセンスも確認します。
- 主な用途
- Webページで参照する圧縮フォント
- 中身の種類
- バイナリデータ
目次・よくある質問・根拠資料を見る
内容の最終確認： · 編集：Kai
開き方・操作手順
使っている環境や目的の項目を開いて、手順を確認してください。
操作名・対応状況はアプリ・OS・版によって異なります。変更する前に原本を残してください。
開けないとき：症状から確認
- 別フォントになる：CSSのfamily・weight・styleとファイルの対応、通信エラーを確認します。
- 英字だけ変わる：日本語グリフや配信側の文字範囲が含まれるか確認します。
- 別ドメインから読めない：フォント配信元のCORS設定とURLを確認します。
- 太字が不自然：weight指定とファイル、擬似太字を確認します。
- 更新しても旧書体：取得URLとキャッシュを確認します。
- 同名書体で結果が違う：local指定と実際の使用書体を確認します。
許諾された原本フォント → WOFF / WOFF2
- 提供元のWeb用配布ファイルを優先し、変換許可と対象文字を確認します。
- 必要なら対応変換ツールでコピーを作り、書体・文字欠け・太さをブラウザーで比較します。
- 変換可能な原書体から出力し、収録文字と太さの対応をテストページで確認します。
WOFFをTTFに改名してもインストール用にはなりません。形式変換で使用許諾は変わりません。
読み込んだ書体と使った書体
Networkの成功だけで適用は判断できません。対象要素のCSSと実際のレンダリング書体を確認し、未収録文字の代替を区別します。
確認例：英字だけ書体が変わる場合は、読込失敗と決めつけず日本語の収録範囲を確認します。開発者ツールで文字ごとの使用書体を比較します。
この手順の根拠：W3C · WOFF File Format 1.0 / W3C · CSS Fonts Module Level 3
配布時に残す設定
書体と同梱CSS、ライセンスを一緒に保管します。別ドメインへ移す際はCORS、太さとサブセットの対応も再確認します。
この手順の根拠：W3C · WOFF File Format 1.0 / W3C · CSS Fonts Module Level 3
関連形式との違い
| 形式・方法 | 役割 | 確認する点 |
|---|---|---|
| WOFF | Web書体容器 | CSS・ライセンス |
| WOFF2 | 別の圧縮形式 | 改名で変換不可 |
| OTF / TTF | 元書体候補 | Web利用条件 |
取り扱いと安全性
フォントは信頼できる配布元から入手し、外部配信を使う場合は通信先とライセンスを確認します。
よくある質問
ダブルクリックでOSへ追加する？
WOFFはWeb用です。デスクトップ用原本を提供元へ確認します。
WOFFを置くだけでサイトの字体が変わる？
CSSの定義と適用が必要です。
日本語を全部含む？
書体・サブセットの収録範囲によります。
読込が成功しても全ての文字に使われない？
収録しない文字は別書体へフォールバックします。使用文字と字形の範囲を確認します。
Web利用許可があれば変換も自由？
変換、再配布やサブセットの許可はライセンス次第です。提供元の条件を確認します。
形式の基本情報：正式名称・MIME type・管理団体
- 名称
- Web Open Font Format 1.0
- 管理・仕様
- W3C
- MIME type
- font/woff
公式・一次情報
- 標準仕様WOFF File Format 1.0
Webフォントの容器構造とデスクトップ導入との違いを定義しています。
W3C · リンク確認： - 標準仕様CSS Fonts Module Level 3
@font-faceとフォントの読み込み条件を定義しています。
W3C · リンク確認：