CSS - @font-face

概要

ルール名	@font-face
構文	@font-face { ... }
サポート	https://caniuse.com/?search=%40font-face

説明

font-family で指定可能なWebフォントを定義します。

フォントファイルは通常、同じドメインのサーバからしかダウンロードできません。他のドメインからダウンロードするには、CORS を指定してください。

CSS

@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	代替フォントの行間を調整します。詳細後述。
unicode-range	フォントを適用する Unicode 範囲を指定します。詳細後述。

様々なフォントをダウンロードできるサイトがあります。

フォントの形式を変換できるサービスもあります。

使用例

CSS

@font-face {
  font-family: 'myfont';
  src: url(../fonts/example.woff) format("woff");
}
.test {
  font-family: 'myfont';
}

HTML

<div class="test">Hello world!</div>

表示

Hello world!

src プロパティ

フォントのURLを指定します。format() でフォーマットを指定します。下記の例では、ブラウザが woff をサポートしていればそれを、無ければ opentype を、それも無ければ Arial を選択します。

CSS

@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-display の値によって上記の時間を調整することができます。

auto：ブラウザが上記の時間を決めます。
block：ブロック時間は短めで、その後は永久にスワップ期間とします。
swap：ブロック時間は非常に短く、その後は永久にスワップ期間とします。
fallback：ブロック時間は非常に短く、その後は短めなスワップ期間とし、ダメならエラー期間とします。
optional：ブロック時間は非常に短く、ダメならスワップ期間無しにエラー期間とします。

CSS

@font-face {
  font-family: myfont;
  src: url(https://example.com/fonts/myfont.woff) format("woff");
  font-display: fallback;
}

ascent-override, descent-override, line-gap-override プロパティ

Webフォントが読み込まれるまでの間、代替フォントが表示されますが、代替フォントからWebフォントに切り替わる際にレイアウトがずれることがあります(CLS: Cumulative Layout Shift)。このずれを小さくするために代替フォントに対して下記をパーセント指定で調整することができます。

ascent-override：代替フォントのアセンダー(ベースラインより上の部分の高さ)を調整します。
descent-override：代替フォントのディセンダー(ベースラインより下の部分の高さ)を調整します。
line-gap-override：代替フォントの行間を調整します。

Jxck さんのサイトで詳しく説明されています。

Web Font のメトリクス上書きによる CLS の改善

unicode-range プロパティ

@font-face を適用する Unicode 範囲を指定します。この範囲のフォントのみ @font-face が適用されます。また、この範囲のフォントを使用するまで、フォントのロードは行われません。未使用のフォントを無駄にローディングしてしまうことを抑制します。初期値は U+0-10FFFF です。カンマ(,) による複数指定やハイフン(-)による範囲指定が可能です。U+3??? は U+3000-3FFF を意味します。

CSS

@font-face {
  font-family: 'my-font';
  src: url(./fonts/example.woff) format('woff');
  unicode-range: U+26, U+41-5A, U+61-7A;    /* &(U+26) と A～Z と a～Z */
}

Google Fonts

Google Fonts を用いれば @font-face を自分で記述しなくても Google が提供する Webフォントを利用することができます。

https://fonts.google.com/

例えば、上記の中から Pacifico フォントを使用する場合、<head>～</head> の間に下記を加えます。

HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Pacifico">

フォントに Pacifico を指定できるようになります。

CSS

.pacifico {
  font-family: Pacifico;
  font-size: 16pt;
  line-height: 30pt;
}

表示

Pacifico designed by Vernon Adams, Jacques Le Bailly, Botjo Nikoltchev, Ani Petrova.

リンク

初版：1997年7月27日、最終更新：2024年11月24日

https://www.tohoho-web.com/css/rule/font-face.htm