font-variation-settings
バリアブルフォント（可変フォント）の各軸を直接制御するプロパティです。wght（ウェイト）、wdth（幅）、opsz（オプティカルサイズ）などの標準軸に加え、フォントデザイナーが定義したカスタム軸も制御できます。font-weightなどの高レベルプロパティが使える場合はそちらを優先し、カスタム軸の制御にこのプロパティを使用することが推奨されます。
概要
バリアブルフォント（可変フォント）の各軸を直接制御するプロパティです。wght（ウェイト）、wdth（幅）、opsz（オプティカルサイズ）などの標準軸に加え、フォントデザイナーが定義したカスタム軸も制御できます。font-weightなどの高レベルプロパティが使える場合はそちらを優先し、カスタム軸の制御にこのプロパティを使用することが推奨されます。
対応ブラウザ
デスクトップ
Chrome 62+
Edge 17+
Safari 11+
Firefox 62+
モバイル
Chrome Android 62+
Safari iOS 11+
Firefox Android 62+
基本構文
CSS
.variable-text {
font-variation-settings:
"wght" 450,
"wdth" 90,
"CASL" 1;
}実務での使いどころ
-
バリアブルフォントの細かな調整
バリアブルフォントのカスタム軸（Casualness、Slantなど）をインタラクティブに変化させ、動的なタイポグラフィ表現を実現します。
注意点
- font-weight等の高レベルプロパティとfont-variation-settingsを同時に設定すると、font-variation-settingsが優先される場合があり、予期しない動作の原因になります。
アクセシビリティ
- バリアブルフォントの軸値を極端に設定するとテキストの可読性が低下するため、本文テキストでは適切な範囲内で使用してください。