フォントの拡張子（ttf、otf、woff、eot）について

2017年4月24日

Webフォントを使うことが多くなり、ttf、otf、woff、eotなど様々なフォントの拡張子を目にすることが増えたのですが、そもそもフォントの拡張子が違うことで何が変わるのかわからなかったので調べてみました。

ttf : True Type Font

パソコンにインストールして使うフォント
｢TrueTypeフォント｣は、マイクロソフト社とアップル社が2社が共同で開発したフォント形式。
WindowsやMacで使う。
■選ぶ条件
・Windowsユーザーで、かつ、フォントを買う目的が「年賀状・ワープロ・プレゼン資料」など、DTP以外のホームユース
・ビジネスユースである
・Windows・Mac問わず、Illustrator 8以前など、古いDTPアプリケーションソフトを使う必要がある

スポンサードサーチ

otf : open type font

パソコンにインストールして使うフォント
｢OpenTypeフォント｣は、アドビシステムズ社とマイクロソフト社の2社が共同で開発したフォント形式。
WindowsやMacで使う。
■選ぶ条件
・Mac OS Xユーザー全般（Classicアプリケーションを使う場合を除く）
・Windows・Mac問わず、Illustrator CS以降など、最近のDTPアプリケーションソフトを使っている

woff : Web Open Font Format

TrueTypeまたはOpenTypeフォントをテーブル単位で圧縮して、独自のヘッダーを追加した形式。
新しい形式のため古いWebブラウザではサポートされていません。

■メリット（いくつかあるが1つを抜粋）
フォントデータが圧縮されているため、サイトで WOFF を使用すると、無圧縮の TrueType や OpenType ファイルの使用と比べて帯域を抑えることができ、読み込み時間も短縮されます。

スポンサードサーチ

eot : Embedded OpenType

Embeddedは「埋め込み」の意味
※IE4～IE9以下対応

まとめ

上記のようなフォントの種類があって、初めて見るとちょっとややこしいように感じてしますが、ざっくり言うとttf、otfはパソコンにインストールして使うタイプのフォントで、Webその他クリエイティブ系の仕事に携わる人が購入する際はotfにするのが良い。
Woffは、ウェブフォントでありttfまたはotfデータが圧縮されているので、ブラウザでページ表示する際に読み込み時間が遅くならない。というところかと思います。

ブラウザ別のwebフォント対応について
https://thinkit.co.jp/story/2011/08/18/2233?page=0%2C1

参考サイト：
http://fontnavi.jp/zakkuri/202-truetype_opentype.aspx