CSSの@font-faceでサーバに置いたWebフォントを使う

モダンブラウザと、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年度版とこれまでの歩み

Pocket

Share on Tumblr