参考URL:http://thinkit.co.jp/story/2011/08/18/2233

Webフォントを利用するには、@規則のひとつである@font-face規則を使います。@規則とは、@キーワードから始まり、次のセミコロン(;)、または、次のブロックまで（{から}まで）で構成される構文です。@font-familyでは、ディスクリプタ（記述子）というものを使ってフォント情報を定義します。
まずは例を見てみましょう。ここで著者の自作フォントの紹介です。本稿を執筆するにあたり、小学校2年生になる娘の協力のもと、TrueType形式の手書きフォントを作ってみました。その名も「ひな字小2／Hina2ndGrade」。ファイル名はHina2ndGrade.ttfです。これをWebフォントとして利用するには次のように記述します。

@font-face {
2
font-family: 'Hina2ndGrade';
3
src: url('../font/Hina2ndGrade.ttf') format('truetype');
4
}
5
p {
6
font-family: 'Hina2ndGrade';
7
}

まず、@font-face規則のfont-familyディスクリプタでWebフォントとして使用するフォントファミリ名を「Hina2ndGrade」として定義しています（font-familyプロパティの値を日本語で指定すると認識できないブラウザがあるため、ここでは経験上、念のために英数字でファミリ名をつけています）。次に、「src: url('...') format('...')」の書式で、フォントファイルのURLとフォント形式を指定しています。

WOFF形式を優先して複数のフォーマットを指定する
先述したように、WOFF形式のフォントはWeb用に開発されており、データが軽く、著作権情報を盛り込むことができるというメリットがあります。Webフォントを使う上で、これから普及してくるフォーマットだと思われます。現状、ひとつのフォント形式だけで主要ブラウザのすべてをカバーすることはできませんが、WOFF形式を優先して指定しておくのが良いでしょう。
@font-faceのsrcディスクリプタでは、複数のフォントファイルをカンマで区切って指定できます。優先度は記述順になっており、その中から利用できるものが選択されます。まず、WOFF形式を指定、次にTrueType形式のフォントファイルをカンマで区切って指定しましょう。この場合、FireFox、Chrome、Opera、IE 9ではWOFF形式で、 Safari、iOS4.2以上、Android2.2以上ではTrueType形式のフォントが使用されます。
［リスト2］@font-faceでフォントを指定

@font-face {
font-family: 'Hina2ndGrade';
src: url('../font/Hina2ndGrade.woff') format('woff'),
url('../font/Hina2ndGrade.ttf') format('truetype');
}
p {
font-family: 'Hina2ndGrade';
}
IE8以下にも対応する
IE 8以下では、EOT形式しか対応していないので、前項の例では表示されません。別途、EOT形式のフォントファイルを用意する必要があります。注意点として、IE 8以下では、半角カンマで複数のフォントファイルを列挙する方法や、format()の記述に対応していません。対応していないformat()を読みに行こうとして無駄なHTTP接続が発生してしまうなどの諸問題もあります。
というわけで、IE 8以下も含めてBulletproof（安全）な対応をするには、少々トリッキーな記述をしてあげる必要があります。方法はいろいろあるのですが、ここでは「The Fontspring@font-face syntax」と呼ばれるシンプルな手法を紹介します。
［リスト3］IE 8以下にもWebフォントを適用（sample2.css）

@font-face {
font-family: 'Hina2ndGrade';
src: url('../font/Hina2ndGrade.eot?') format('eot'),
url('../font/Hina2ndGrade.woff') format('woff'),
url('../font/Hina2ndGrade.ttf') format('truetype'),
}
方法は簡単で、srcディスクリプタで最初にIE 8以下用のEOT形式のファイルを指定しますが、この時、「url('../font/Hina2ndGrade.eot?')」という具合にファイル名の直後に「?」をつけます。直後のformat()に指定する値は、例ではeotとしていますが、?以降、IEは読み込みませんので、実際には何でもかまいまいません。後は、先のサンプル同様、他のフォント形式を、半角カンマで区切って指定していくだけでOKです。
このようにしておけば、IE6を含むあらゆるブラウザでWebフォントが有効になります。