Specify a font named "myFirstFont", and specify the URL where it can be found:

"myFirstFont" という名前のフォントを指定し、それを見つけることのできる URL を指定します：

@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}

定義と用法

@font-face 規則により、web デザイナは、もはや "web-safe" フォントの 1 つを使用する必要がなくなりました。

新しい @font-face 規則では、最初にフォントの名前(例えば myFirstFont)を定義し、次にフォント・ファイルへポイントしなければなりません。

チップ: フォント URL には小文字を使用してください。大文字を使用すると、IE では予期しない結果が生じます！

HTML 要素にフォントを使用するためには、font-family プロパティによってフォントの名前（myFirstFont）を参照します：

ブラウザ・サポート

@font-face 規則は、Internet Explorer、Firefox、Opera、Chrome、Safari がサポートしています。

表中の数字は、完全に font フォーマットをサポートした最初のブラウザのバージョンです。

*Edge と IE："installable" に設定したときのみ、font フォーマットが機能します。

*Firefox：デフォルトでは無効ですが、有効にすることができます（WOFF2 を使用するためのフラグに "true" を設定する必要があります）。

構文

フォント記述子	値	説明
font-family	name	必須。フォントの名前を定義します
src	URL	必須。フォントをダウンロードする URL（複数可）を定義します
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	任意。フォント幅の伸縮方法を定義します。デフォルト値は "normal" です
font-style	normal italic oblique	任意。フォントのスタイル方法を定義します。デフォルト値は "normal" です
font-weight	normal bold 100 200 300 400 500 600 700 800 900	任意。フォントの太さを定義します。デフォルト値は "normal" です
unicode-range	unicode-range	任意。フォントがサポートするユニコード文字の範囲を定義します。デフォルトは、"U+0-10FFFF" です

太字テキストには、記述子を含む別な @font-face 規則を追加する必要があります：

@font-face {
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight: bold;
}

ファイル "sansation_bold.woff" は、Sansation フォントの太文字が含まれる別のフォントファイルです。

ブラウザは、フォントファミリ "myFirstFont" であるテキストの一部を、太字でレンダリングするときはこれを使用します。

この方法を使用すれば、同じフォントに対して多数の @font-face 規則を指定することができます。

CSS3 @font-face Rule

定義と用法