@font-face
CSS の @font-face
@-規則は、テキストを表示するための独自フォントを指定します。フォントはリモートサーバーまたはユーザー自身のコンピューターにローカルにインストールされたフォントのどちらかから読み込むことができます。 local()
関数が与えられると、ユーザーのコンピューターで探すフォント名を指定し、ユーザーエージェントがそれを見つけることができれば、そのローカルフォントを使用します。そうでなければ、 url()
関数を使用して指定されたフォントリソースをダウンロードして使用します。
@font-face
で独自のフォントを提供できるようになることで、 "web-safe" フォント (つまり、広く利用できると考えられるほど一般的なフォント) と呼ばれる制限なしにコンテンツをデザインすることができます。ローカルにインストールされているフォントを、名前を指定して検索し使用することができる機能により、インターネット接続に頼らなくてもフォントを基本的なものからカスタマイズすることができるようになります。
url()
と local()
を両方とも使用することは一般的であり、そうすることでユーザーのインストールされたフォントのコピーが利用できればそれを利用し、ユーザーの端末に見つからない場合はフォントのコピーを代替としてダウンロードすることができます。
@font-face
@-規則は、 CSS の最上位だけでなく、 CSS の条件付き @-規則グループの中でも使用することができます。
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
構文
記述子
font-display
- フォントのダウンロード及び準備状況に応じて、どのようにフォントフェイスを表示するかを特定します。
font-family
- font プロパティの font face 値で使われる名前を指定します。
font-stretch
font-stretch
値です。 Firefox 61 以降 (及びその他の最近のブラウザーの多く) では、font-face で対応している範囲を指定するために、font-stretch: 50% 200%;
のように二つの値を受け付けます。font-style
font-style
値です。 Firefox 61 以降 (及びその他の最近のブラウザーの多く) では、font-face で対応している範囲を指定するために、font-style: oblique 20deg 50deg;
のように二つの値を受け付けます。font-weight
font-weight
値です。 Firefox 61 以降 (及びその他の最近のブラウザーの多く) では、font-face で対応している範囲を指定するために、font-weight: 100 400;
のように二つの値を受け付けます。font-variant
(en-US)font-variant
値です。font-feature-settings
- OpenType フォントで高度な印刷機能を制御することができるようにします。
font-variation-settings
- 変化の特徴を表す4文字の軸名を、種類の値と共に指定することにより、 OpenType 又は TrueType フォントの種類を低レベルで制御できます。
src
-
フォントデータを含むリソースを指定します。これでリモートのフォントファイルの位置又はユーザーのコンピューターのフォント名を指定することができます。
ブラウザーにフォントのリソースがどの形式であるかのヒントを提供するために — それで最適なものを選択できます —
format()
関数の中に形式を含めることができます。src: url(ideal-sans-serif.woff) format("woff"), url(basic-sans-serif.ttf) format("truetype");
利用可能な形式は、
"woff"
,"woff2"
,"truetype"
,"opentype"
,"embedded-opentype"
,"svg"
です。 unicode-range
- フォントで使用される Unicode コードポイントの範囲です。
形式文法
@font-face { [ font-family: <family-name>; ] || [ src: <src>; ] || [ unicode-range: <unicode-range>; ] || [ font-variant: <font-variant>; ] || [ font-feature-settings: <font-feature-settings>; ] || [ font-variation-settings: <font-variation-settings>; ] || [ font-stretch: <font-stretch>; ] || [ font-weight: <font-weight>; ] || [ font-style: <font-style>; ] }ここで
<family-name> = <string> | <custom-ident>+
例
この例は単にダウンロードフォントを指定し、ドキュメントの本文全体に適用します。
<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;
}
フォントの MIME タイプ
形式 | MIME タイプ |
---|---|
TrueType | font/ttf |
OpenType | font/otf |
Web Open File Format | font/woff |
Web Open File Format 2 | font/woff2 |
メモ
- フォントのダウンロードは、同一ドメイン制約に従います (フォントファイルは、それらが使用されているページと同じドメインにある必要があります)。 HTTP アクセス制御によりこの制限を緩和できます。
@font-face
は CSS セレクターの中で宣言することはできません。例えば、次の例は動作しません。.className { @font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; } }
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
WOFF File Format 2.0 WOFF2 font format の定義 |
勧告 | 新しい圧縮アルゴリズムのフォント形式を定義 |
WOFF File Format 1.0 WOFF font format の定義 |
勧告 | フォント形式の定義 |
CSS Fonts Module Level 3 @font-face の定義 |
勧告 | 初回定義 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。