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からのパスです。

<br />
@font-face {<br />
    font-family: &quot;flopdesign&quot;;<br />
    src:url(&quot;../font/flopdesign-kana.eot&quot;);<br />
    src:url(&quot;../font/flopdesign-kana.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;),<br />
        url(&quot;../font/flopdesign-kana.woff&quot;) format(&quot;woff&quot;),<br />
        url(&quot;../font/flopdesign-kana.ttf&quot;) format(&quot;truetype&quot;);<br />
}<br />

各フォント形式が対応しているブラウザは、このようになっています。

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以下をのためのフォントデータです。
含めると、このような記述になります。

<br />
@font-face {<br />
    font-family: &quot;flopdesign&quot;;<br />
    src:url(&quot;../font/flopdesign-kana.eot&quot;);<br />
    src:url(&quot;../font/flopdesign-kana.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;),<br />
        url(&quot;../font/flopdesign-kana.woff&quot;) format(&quot;woff&quot;),<br />
        url(&quot;../font/flopdesign-kana.ttf&quot;) format(&quot;truetype&quot;),<br />
        url(&quot;../font/flopdesign-kana.svg&quot;) format(&quot;svg&quot;);<br />
}<br />

私の個人的な見解ですが、
iOSは世代交代がスムーズなので、よっぽどサポートユーザの多いサービスでなければ5は切っても差し支えないかなと思ってます。

@font-faceで定義したフォントをつかう

@font-faceのfont-familyでつけた名前を、このように指定します。

<br />
html {<br />
	font-family: &quot;flopdesign&quot;, &quot;Hiragino Kaku Gothic Pro&quot;, &quot;ヒラギノ角ゴ Pro W3&quot; Meiryo, sans-serif;<br />
}<br />

参考：
WebフォントのCSS指定2014年度版とこれまでの歩み