[CSS]IEを含めた主要ブラウザと各スマートフォンに対応した@font-faceの指定方法

Post on:2011年2月7日

各ブラウザ・スマートフォンに対応させる@font-faceの指定方法

各主要ブラウザ、スマートフォンに対応させる@font-faceの記述は、下記のようになります。

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot?') format('eot'), 
	     url('myfont-webfont.woff') format('woff'), 
	     url('myfont-webfont.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
	}

対応ブラウザ

Safari 5.03
IE 6-9
Firefox 3.6-4
Chrome 8
iOS 3.2-4.2
Android 2.2-2.3
Opera 11

実装のポイント

IE9以下ではsrcに一つより多くのフォントを指定すると、そのロードに失敗をし404エラーを返します。原因は、IEは括弧の始めから終わりまでをファイルとしてロードしようとするからです。

それを防ぐために「EOT」を使用し、一つだけ「?」を付加します。「?」をつけることで、EOTファイルだけをロードするようにIEをだまします。
それ以外は他のブラウザの仕様に従って、記述します。

「?」を付加する元となったのは下記の記事、とのことです。
Font face in your face.

[ad#ad-2]

参考

よく知られている「Mo' Bulletproofer @Font-Face CSS Syntax（2009年9月）」は、記述が少し複雑で、Androidなどには対応していません。

@font-face{ /* for IE */
font-family:FishyFont;
src:url(fishy.eot);
}
@font-face { /* for non-IE */
font-family:FishyFont;
src:url(http://:/) format("No-IE-404"),url(fishy.ttf) f