CSS @font-faceルール

定義と使用法

@font-faceルールを使用することで、Webデザイナーは「セキュリティー上の理由」で使用する必要があるフォントを使用する必要がなくなります。

@font-faceルールでは、まずフォントの名前（例えばmyFirstFont）を定義し、フォントファイルを指し示す必要があります。

ヒント：フォントのURLは小文字を使用してください。大文字を使用するとIEで予期せぬ結果が発生する可能性があります！

HTML要素にフォントを使用する場合は、font-family属性を通じてフォントの名前（myFirstFont）を参照してください：

div {
  font-family: myFirstFont;
}

参照もしてください：

CSSチュートリアル：CSS Web 字体

例

「myFirstFont」と名付けられたフォントを指定し、それを探すURLを定義します：

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

自分で試してみてください

以下のページの下部にTIYの例が見つかります。

CSS文法

@font-face {
  font-properties
}
フォント記述子 値 説明
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 オプション。フォントがサポートするUnicode文字の範囲を定義します。デフォルト値は「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ルールを設定できます。

ブラウザのサポート

Internet Explorer、Firefox、Opera、Chrome、Safariはすべて@font-faceルールをサポートしています。

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

フォント形式
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG サポートされていません サポートされていません サポートされていません 3.2 サポートされていません
EOT 6.0 サポートされていません サポートされていません サポートされていません サポートされていません

* EdgeおよびIE: フォント形式は「installable」に設定されている場合にのみ有効です

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