WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： はっち
カテゴリー： マークアップ >その他

Webフォント、便利ですよね。
かの有名な「Google Fonts」を利用すれば、ソースへ少量の追記をするだけですぐに表示できます。
そんな便利なWebフォントですが、時にはサブセット化やオリジナルフォントを使用するために自らフォントファイルを作成し、サーバーに置いて使用する機会もあると思います。
その際に戸惑うのが、ファイルの拡張子。
今回は、Webフォントの拡張子について書いていきます。

なぜ多数の拡張子ファイルが用意されているのか

それは、ブラウザにより拡張子の対応/非対応が存在するので、拡張子によってはWebフォントを上手く読み込めないことがあるからです。
様々なブラウザで表示させるためにも、拡張子の異なったフォントファイルを複数用意する必要があります。

拡張子の種類

Webフォントファイルの拡張子としてよく目にするのは、以下の6種類です。
※未対応ブラウザは「Can I Use」を参照しています。

otf

一般的にPCにインストールして使用するフォントファイル。

■未対応ブラウザ
「opera mini」
→IE9では個々のブラウザ設定により対応/非対応が変わる。

ttf

otfと同様一般的にPCにインストールして使用するフォントファイル。
Android4.3以前に対応している。

■未対応ブラウザ
「opera mini」
→IE9では個々のブラウザ設定により対応/非対応が変わる。

woff

TrueType（ttf）やOpenType（otf）の圧縮版。ファイルサイズが「otf/ttf」より軽い。＝　読み込み時間が早い

■未対応ブラウザ
「opera mini」

woff2

「woff」の進化版。woffと比べても圧縮率が高い。

■未対応ブラウザ
「IE11」「UC Browser for Android」「Opera Mini」「一部条件のsafari（OS X 10.11 El Capitanから以前のsafari）」

svg

こちらはテキストに影響するWebフォントというよりは、Webアイコンフォントで使用されていることが多いです。
主要ブラウザ全てに対応していますが、Webフォントで使用するのには不向きかもしれません。
最新の「Font Awesome」ではSVGがメインになっています。

■未対応ブラウザ
なし

eot

この拡張子ファイルは、IE8以下に必要でした。
しかし、現在IE8の開発自体は終了しているので、個人的には記載する必要はないと思います。
が、古いIEを気にするなら記述しても問題ありません。

■未対応ブラウザ
「IE」以外すべて

まとめ

ブラウザの対応状況等を鑑みて、「woff」「ttf」の2種類のフォントを用意して使用することが現状では最善だと思います。
主要ブラウザに対応＋otfよりファイル容量の軽い「woff」と、Android～4.3へ対応させるために「ttf」を使用という具合です。
「woff2」はもう少し時が経ち、主要ブラウザに対応されたら追加するといったところでしょうか。
このように拡張子それぞれに特徴がありますので、状況に応じて上手く使いこなせるといいですね。