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 4The 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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
font-variation-settings
|
Chrome
Full support 62 |
Edge
Full support 79 |
Firefox Full support 62 Full support 62 No support 60 — 62 Disabled' From version 60 until version 62 (exclusive): this feature is behind the |
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 62 Full support 62 No support 60 — 62 Disabled' From version 60 until version 62 (exclusive): this feature is behind the |
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.
See also
font-display
font-family
font-stretch
font-style
font-weight
font-variant
font-feature-settings
src
unicode-range
font-variation-settings by Mozilla Contributors is licensed under CC-BY-SA 2.5.