主要ブラウザ別の「WEBフォント形式」対応表


Web font collection / Impress PC

WEBフォントとして「TTF(TrueType Font)形式」をそのまま使えるブラウザも存在しますが、「TTF形式」をサポートせず、「WEBフォント専用の形式」を求めるブラウザも多く存在します。

最新ブラウザのほとんどは「WOFF(Web Open Font Format)形式」に対応してきており、WEBフォント専用の形式は、今後、「WOFF形式」に統一されていく動きにあります。

ということは、少し前のブラウザでは、その対応形式はバラバラだったということです。

WEBフォントを利用する上で、各ブラウザのWEBフォント形式の対応状況は知っておく必要がありますので、以下に、主要ブラウザ別のWEBフォント形式対応表を掲載しておきます。

TTF OTF EOT WOFF SVG
IE 4~ × × × ×
IE 9~ × × ×
Firefox 3.5~ × × ×
Firefox 3.6~ × ×
Chrome 4~ × ×
Chrome 6~ ×
Safari 3.1~ × ×
Safari 5.1~ ×
Opera 10~ × ×
Opera 11.10~ ×
iOS 4.0~ × × × ×
iOS 4.2~ × ×
iOS 5.0~ ×
Android 2.2~ × × ×
Android 4.4~ × ×

WOFF (Web Open Font Format) – Web developer guide | MDN
https://developer.mozilla.org/ja/docs/Web/Guide/WOFF

Can I use WOFF
http://caniuse.com/woff

対応表からも分かるように、全てのブラウザを網羅しているWEBフォント形式は存在しません。最新のブラウザが、ようやく「WOFF形式」に対応してきたことが分かります。

つまり、WEBフォントを全てのブラウザに適用させるには、「TTF」「EOT」「WOFF」「SVG」の4形式を用意する必要があるということになります。

「TTF形式」が手元にあれば、以下の様なフリーのWEBサービスで、一度にこの4形式を用意することが可能です。

Create Your Own @font-face Kits | Font Squirrel
http://www.fontsquirrel.com/tools/webfont-generator

「TTF」からWEBフォント「EOT」「WOFF」「SVG」へ変換する方法
http://www.materialize.jp/art/css3/6859/

(平成26年7月5日 アシベズヘア@ashibehair_mfacebooknoteSUZURI

主要ブラウザ別の「WEBフォント形式」対応表」への3件のフィードバック

  1. ピンバック: WEBフォントを利用する方法(TTFから変換しCSSで適用する方法) | materialize.jp

  2. ピンバック: Webフォントを作成する その2 – WordPressでフリーオリジナルフォント

  3. ピンバック: WebフォントをWordPress全体で使用する | WordPressでフリーオリジナルフォント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です