概要
The @font-face は、Web ページを製作者が期待した通り描画するためにダウンロードされるべき、Web フォントを指定するための @ 規則を提供します。作成者が自身のフォントを提供できるようになるため、@font-face はユーザのコンピュータにインストールしているフォントの数に依存する必要性を排除します。@font-face は CSS のトップレベルだけでなく、CSS の条件付きグループ規則の中でも使えます。
構文
記述子
font-family- font プロパティの font face 値で使われることになるフォント名(すなわち、font-family: <family-name>;)
src- リモートフォントファイルの場所を表す URL、またはユーザのコンピュータ上のフォント名を
local("Font Name")形式で指定します。local()構文を用いてユーザのローカルコンピュータのフォントを名前で指定することができます。もしフォントが見つからない場合、見つかるまで他のソースが検索されます。 font-variantfont-variant値font-stretchfont-stretch値font-weightfont-weight値font-stylefont-style値unicode-range- font-face 規則で定義する Unicode コードポイントの範囲。
形式文法
@font-face {
[ font-family: <family-name>; ] ||
[ src: [ <uri> [format(<string>#)]? | <font-face-name> ]#; ] ||
[ unicode-range: <urange>#; ] ||
[ font-variant: <font-variant>; ] ||
[ font-feature-settings: normal | <feature-tag-value>#; ] ||
[ font-stretch: <font-stretch>; ] ||
[ font-weight: <weight>; ] ||
[ font-style: <style>; ]
}where
<family-name> = <string> | <IDENT>+
<feature-tag-value> = <string> [ <integer> | on | off ]?
例
この例は単にダウンロードフォントを指定し、ドキュメントの body 全体に適用します。
<html>
<head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
}
body { font-family: "Bitstream Vera Serif Bold", serif }
</style>
</head>
<body>
This is Bitstream Vera Serif Bold.
</body>
</html>
この例では、 "Helvetica Neue Bold" のユーザのローカルコピーが使用されます。もしユーザがそのフォントをインストールしていない場合は（二つの異なる名前でトライしています）、"MgOpenModernaBold.ttf" という名前のダウンロードファイルが使用されます:
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
注意
- フォントのダウンロードは同一ドメイン制限に従います（フォントファイルはそれらが使用されているページと同じドメインにある必要があります）。HTTP access controls によりこの制限を緩和できます。
- TrueType、OpenType、WOFF のための MIME タイプが定義されていないため、ファイルの MIME タイプは考慮されません。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| WOFF File Format 2.0 WOFF2 font format の定義 |
勧告候補 | 新しい圧縮アルゴリズムのフォントフォーマットを定義 |
| WOFF File Format 1.0 WOFF font format の定義 |
勧告 | フォントフォーマットの定義 |
| CSS Fonts Module Level 3 @font-face の定義 |
勧告候補 |
ブラウザ実装状況
| 機能 | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 3.5 (1.9.1) | 4.0 | 4.0 | 10.0 | 3.1 |
| WOFF | 3.5 (1.9.1) | 6.0 | 9.0 | 11.10 | 5.1 |
| WOFF2 | 39 (39)[1] | 38 | 未サポート | 24 | 未サポート |
| SVG フォント[2] | 未サポート[3] | (有) | 未サポート | (有) | (有) |
unicode-range |
36 (36) |
(有) | 9.0 | (有) | (有) |
| 機能 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mini | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 基本サポート | (有) | 1.0 (1.9.1) | ? | 未サポート | 10.0 | (有) |
| WOFF | 4.4 | 5.0 (5.0) | 10.0 | 未サポート | 11.0 | 5.0 |
| WOFF2 | 未サポート | 39.0 (39.0)[1] | 未サポート | ? | ? | 未サポート |
| SVG フォント[2] | ? | 未サポート[3] | ? | 未サポート | 10.0 | (有) |
unicode-range |
? | 36.0 (36.0) | ? | 未サポート | ? | (有) |
[1] Gecko 35 から Gecko 38 の WOFF2 サポートは、Aurora および Nightly バージョンのみ有効化していました。Beta および Release バージョンで使用するには、設定項目 gfx.downloadable_fonts.woff2.enabled を true にしなければなりません。
[2] OpenType フォントパッケージ内の SVG グリフを許可するほうが好ましいため、SVG フォントのサポートは廃止されました。
[3] Gecko では SVG フォントの実装を登録した バグ 119490 がありましたが、SVG フォントが OpenType フォントパッケージ内の SVG グリフに置き換わったため、バグが閉じられました。
注記
- 埋め込みの OpenType フォント形式はプロプライエタリな機能なので、ブラウザ実装状況の表に記載していません。IE 9.0 以前では、IE はこの形式だけをサポートしていました。
- TrueType と OpenType は WOFF で置き換えられたため、記載していません。