CSS @ font-faceルール

「myFirstFont」という名前のフォントを指定し、それが見つかるURLを指定します。

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

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

この@font-faceルールにより、Webデザイナーは「Webセーフ」フォントの1つを使用する必要がなくなります。

ルールでは、@font-face最初にフォントの名前（myFirstFontなど）を定義してから、フォントファイルをポイントする必要があります。

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

div {
font-family: myFirstFont;
}

この@font-faceルールは、Edge、Chrome、Firefox、Safari、およびOperaでサポートされています。

表の数字は、フォント形式を完全にサポートする最初のブラウザバージョンを示しています。

*フォント形式は、「インストール可能」に設定されている場合にのみ機能します。

@font-face {
font-properties
}

Font descriptor	Values	Description
font-family	name	Required. Defines the name of the font.
src	URL	Required. Defines the URL(s) where the font should be downloaded from
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Optional. Defines how the font should be stretched. Default value is "normal"
font-style	normal italic oblique	Optional. Defines how the font should be styled. Default value is "normal"
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Optional. Defines the boldness of the font. Default value is "normal"
unicode-range	unicode-range	Optional. Defines the range of unicode characters the font supports. Default value is "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ルールを設定できます。