| ルール名 | @font-face |
|---|---|
| 構文 | @font-face { ... } |
| サポート | https://caniuse.com/?search=%40font-face |
font-family で指定可能なWebフォントを定義します。
フォントファイルは通常、同じドメインのサーバからしかダウンロードできません。他のドメインからダウンロードするには、CORS を指定してください。
@font-face {
font-family: 'my-font';
src: url(../fonts/myfont.woff) format("woff");
}
* {
font-family: 'my-font';
}
利用可能なフォント形式には下記などがあります。TTF や OTF よりも WOFF の方が Web に適して軽くなっています。IE 未対応ですが、WOFF2 の方が圧縮率が高いです。
| 形式 | 説明 | フォーマット名 | 拡張子 | サポート |
|---|---|---|---|---|
| TTF | TrueType Font | truetype | .ttf | ほぼサポート。詳細 |
| OTF | OpenType Font | otf | .otf .ttf | ほぼサポート。詳細 |
| WOFF | Web Open Font Format | woff | .woff | ほぼサポート。詳細 |
| WOFF2 | WOFF 2 | woff2 | .woff2 | IE以外。詳細 |
| EOT | Embedded OpenType | embedded-opentype | .eot | IEのみ。詳細 |
| SVG | Scalable Vector Graphics | svg | .svg | Safariのみ。詳細 |
| SVGZ | Gzipped SVG | svg | .svgz | Safariのみ。詳細 |
@font-face のプロパティとして下記を指定できます。
| プロパティ | 説明 |
|---|---|
| font-family | CSSプロパティの font-family で指定するフォント名を定義します。 |
| src | フォントファイルのURLを指定します。詳細後述。 |
| font-style | CSSプロパティの font-style と同じフォントスタイルを指定します。 |
| font-weight | CSSプロパティの font-weight と同じフォントの太さを指定します。 |
| font-stretch | CSSプロパティの font-stretch と同じフォントの横幅を指定します。 |
| unicode-range | 適用する文字範囲を U+0026 や U+0041-005A のように指定します。カンマ区切りで複数指定できます。 |
| font-feature-settings | CSSプロパティの font-feature-settings と同じフォントの特性を指定します。 |
| font-variation-settings | CSSプロパティの font-variation-settings と同じフォントのバリエーションを指定します。 |
| font-named-instance | フォントで定義されたインスタンス名を指定します。(→ 詳細) |
| font-display | フォントの読み込み中や読込失敗時の動作を指定します。詳細後述。 |
| font-language-override | CSSプロパティの font-language-override と同じフォントの言語システムタグを指定します。 |
| ascent-override | 代替フォントのアセンダー(ベースラインより上の部分の高さ)を調整します。詳細後述。 |
| descent-override | 代替フォントのディセンダー(ベースラインより下の部分の高さ)を調整します。詳細後述。 |
| line-gap-override | 代替フォントの行間を調整します。詳細後述。 |
様々なフォントをダウンロードできるサイトがあります。
フォントの形式を変換できるサービスもあります。
@font-face {
font-family: 'myfont';
src: url(../fonts/example.woff) format("woff");
}
.test {
font-family: 'myfont';
}
<div class="test">Hello world!</div>
フォントのURLを指定します。format() でフォーマットを指定します。下記の例では、ブラウザが woff をサポートしていればそれを、無ければ opentype を、それも無ければ Arial を選択します。
@font-face {
font-family: myfont;
src: url(https://example.com/fonts/myfont.woff) format("woff"),
url(https://example.com/fonts/myfont.otf) format("opentype"),
local(Arial);
}
フォントの読み込み関して下記の時間があります。
font-display の値によって上記の時間を調整することができます。
@font-face {
font-family: myfont;
src: url(https://example.com/fonts/myfont.woff) format("woff");
font-display: fallback;
}
Webフォントが読み込まれるまでの間、代替フォントが表示されますが、代替フォントからWebフォントに切り替わる際にレイアウトがずれることがあります(CLS: Cumulative Layout Shift)。このずれを小さくするために代替フォントに対して下記をパーセント指定で調整することができます。
Jxck さんのサイトで詳しく説明されています。
Google Fonts を用いれば @font-face を自分で記述しなくても Google が提供する Webフォントを利用することができます。
例えば、上記の中から Pacifico フォントを使用する場合、<head>～</head> の間に下記を加えます。
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Pacifico">
フォントに Pacifico を指定できるようになります。
.pacifico {
font-family: Pacifico;
font-size: 16pt;
line-height: 30pt;
}