モダンブラウザと、IE、iOS 6以上、Android 4.2以上をサポートする場合
この3種類の形式のフォントデータを置きます。
- eot … IE用
- woff… ほとんどのブラウザ用
- ttf … Android4.3以下用
font-faceを定義
CSSがわはまず、サーバに設置しているフォントデータを呼び出す準備として@font-faceを定義します。
font-familyは、任意の名称をつけられます。
ファイルへのパスは、htmlからのパスではなくCSSからのパスです。
@font-face { font-family: "flopdesign"; src:url("../font/flopdesign-kana.eot"); src:url("../font/flopdesign-kana.eot?#iefix") format("embedded-opentype"), url("../font/flopdesign-kana.woff") format("woff"), url("../font/flopdesign-kana.ttf") format("truetype"); }
各フォント形式が対応しているブラウザは、このようになっています。
eot形式
eotはInternetExplorerのためのフォントデータです。
2行目のeotは、カンマ区切りでの複数指定書式に対応していないIE9のための設定です。
3行目は、IE8以下用で、?#iefixは、カンマで区切ったwoff以降を無視させるためわざと指定してあるダミーパラメータです。
woff形式
Chrome、Opera、Firefox、Android4.4以上、iOS6i以上のためのフォントデータです。
ttf形式
Android4.3以下のためのフォントデータです。
古いAndroidをサポート外にする場合は省略できます。
svg形式
svgはiOS 5以下をのためのフォントデータです。
含めると、このような記述になります。
@font-face { font-family: "flopdesign"; src:url("../font/flopdesign-kana.eot"); src:url("../font/flopdesign-kana.eot?#iefix") format("embedded-opentype"), url("../font/flopdesign-kana.woff") format("woff"), url("../font/flopdesign-kana.ttf") format("truetype"), url("../font/flopdesign-kana.svg") format("svg"); }
私の個人的な見解ですが、
iOSは世代交代がスムーズなので、よっぽどサポートユーザの多いサービスでなければ5は切っても差し支えないかなと思ってます。
@font-faceで定義したフォントをつかう
@font-faceのfont-familyでつけた名前を、このように指定します。
html { font-family: "flopdesign", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3" Meiryo, sans-serif; }
参考:
WebフォントのCSS指定2014年度版とこれまでの歩み