The font-variation-settings
CSS descriptor allows authors to specify low-level OpenType or TrueType font variations in the @font-face
rule.
Syntax
/* Use the default settings */ font-variation-settings: normal; /* Set values for OpenType axis names */ font-variation-settings: "xhgt" 0.7;
Values
normal
- Text is laid out using default settings.
<string> <number>
- When rendering text, the list of OpenType axis names is passed to the text layout engine to enable or disable font features. Each setting is always a
<string>
of 4 ASCII characters, followed by a<number>
indicating the axis value. If the<string>
has more or fewer characters or contains characters outside the U+20 - U+7E codepoint range, the whole property is invalid. The<number>
can be fractional or negative.
Formal definition
Related at-rule | @font-face |
---|---|
Initial value | normal |
Computed value | as specified |
Formal syntax
normal | [ <string> <number> ]#
Examples
Setting font weight and stretch in a @font-face rule
@font-face { font-family: 'OpenTypeFont'; src: url('open_type_font.woff2') format('woff2'); font-weight: normal; font-style: normal; font-variation-settings: 'wght' 400, 'wdth' 300; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 4 The definition of 'font-variation-settings' in that specification. |
Working Draft | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
font-variation-settings | Chrome Full support 62 | Edge Full support 79 | Firefox
Full support
60
| IE No support No | Opera Full support 49 | Safari No support No | WebView Android Full support 62 | Chrome Android Full support 62 | Firefox Android
Full support
60
| Opera Android Full support 46 | Safari iOS No support No | Samsung Internet Android Full support 8.0 |
Legend
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.
- User must explicitly enable this feature.