CSS Reference

font-variation-settings

バリアブルフォントにパラメータを指定する

font-variation-settings プロパティは、可変フォント（Variable Font / バリアブルフォント）において、特定のフォントのバリエーション（軸）の設定をカスタマイズするために使用されます。バリアブルフォントは、ひとつフォントファイル内で異なるウェイト（太さ）、幅、斜体などの複数のスタイルを動的に生成できるため、フォントのスタイルの柔軟性を高めることができます。

指定できる値は下記の通りです。

normal フォントの軸設定が何も行われない状態です。（既定値）
<opentype-tag> <number> <opentype-tag> は、バリアブルフォントの軸を表す名前です。<opentype-tag> は、大小区別をする4文字のASCII文字から成り、OpenType/TrueType の仕様に基づいています。4文字でないものや、ASCIIの範囲外の文字（Unicode範囲 U+0020～U+007E 以外の文字）を含むものは無効となります。カスタム軸を持つフォントも、この仕様に従って <opentype-tag> を定義できます。
<number> は整数または小数部分のある数値です。

<opentype-tag> の値としては下記が挙げられます。

軸 意味
wght Weight（フォントの太さ）
wdth Width（フォントの幅）
slnt Slant（フォントの傾き）
ital Italic（斜体）
opsz Optical Size（文字サイズに応じた最適化）

上記を踏まえて、具体的な指定例としては下記のような記述になります。

font-variation-settings: "wght" 700;

カンマ（,）で区切って複数の軸に対する指定をすることもできます。

font-variation-settings: "wght" 700, "wdth" 120, "opsz" 14;

なお、font-variation-settings プロパティは、バリアブルフォントの特定の軸を制御するためのプロパティですが、特定の軸を設定する際には、font-weight や font-style などの基本プロパティを使用すべきとされています。

以下に、軸ごとに、本来使用すべき基本プロパティをまとめます。

軸 代替プロパティ 説明
wght（Weight） font-weight font-weight プロパティは、フォントが wght 軸を持っている場合、その軸の値を設定します。
wdth（Width） font-stretch font-stretch プロパティは、フォントが wdth 軸を持っている場合、その軸の値を設定します。
slnt（Slant）または ital（Italic） font-style font-style プロパティは、値によって slnt または ital 軸を設定します。
opsz（Optical Size） font-optical-sizing font-optical-sizing プロパティは、フォントが opsz 軸を持っている場合、その軸の値を設定します。

font-variation-settingsの仕様

初期値
  • normal
対象となる要素
  • すべての要素
継承
  • あり

font-variation-settingsのサンプルソース

font-variation-settings: "wght" 700;
font-variation-settings: "wght" 700, "wdth" 120, "opsz" 14;

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome