ウェブサイトの中でも、特にウェブフォントの設定時に検討することが多いフォントの拡張子。一般的なものには以下の拡張子がある。

  • .eot
  • .ttf
  • .otf
  • .woff
  • .woff2

これらをウェブサイトで採用する場合に、どういった基準で選定すればいいのか。その方法と各拡張子ごとの特徴を以下にまとめる。

古くから存在するフォント拡張子

「.eot」 - Embedded OpenType

Windows(IE4~)がサポートしているフォント形式。IEだけしか使えない。IEの古いバージョンをフォローする必要がない場合はこの拡張子は使う必要ナシ。これに代わるフォント形式(.woff)が開発されている。

「.ttf」 - True Type Font

1990年にマイクロソフトとアップルが共同開発したフォント形式で、多くの書体で採用されている。正式名は、TrueType Font(トゥルータイプフォント)。

同一書体の複数パターンを収録したフォントコレクションは拡張子が「ttc」となる。

「.otf」 - Open Type Font

1997年にマイクロソフトとアドビが共同開発したフォント拡張子。「.ttf」よりも新しく、多機能(収録次数が多い、合字機能、カーニング等)。Windowsとmacで互換性があるので、文字化けリスクが少ない。

同一書体の複数パターンを収録したフォントコレクションは拡張子が「otc」となる。

「.woff」 - Web Open Font Format

MozillaがType SupplyやLettErrorなどと開発。TrueTypeやOpenTypeと違い、独自の圧縮をおこなっているため軽量なのが特徴。2019年1月時点で、woffはPCとスマートフォンの各主要ブラウザに対応(IEも9から対応)しているので、基本はこれ1種類があれば問題ない。

ただ、Android4.3(2012年リリース)が非対応なので、古いデバイスをフォローする必要がある場合は、「.ttf」「.otf」のフォント形式も用意する。逆を言えば、古いデバイスを考えなくていいなら、「.woff」一択でいい。

更にフォントファイルの圧縮率が高い「.woff2」という形式も開発され、主要ブラウザ各種への対応が進められている。これが全ブラウザ対応となったら、これだけでいいと思う。

「.woff」と「.woff2」の違いは、採用されている圧縮アルゴリズム。「.woff2」のほうが12%ほど圧縮率が高いらしい。「.woff2」がほとんどの環境でサポートされれば、今後は「.woff2」一択。

ウェブフォントの設定サンプル

@font-face { font-family: 'apjapanesefonttregular'; src: url('../fonts/APJapanesefont.woff') format('woff'), url('../fonts/APJapanesefont.ttf') format('truetype'); }

ウェブサイト制作でウェブフォントを使う必要がある場合、いちおう保険的に「.ttf」「.otf」を添えてるが、実際は「.woff」と「.woff2」だけあればいいと思うのね。IE11が対象ブラウザから外れるなら、「.woff2」だけでもOK。