@font-face.font-variation-settings
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.
normal | [ <string> <number> ]#
Examples
@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
|
Desktop |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
Basic support |
62 |
No |
60 Disabled
- 60
Disabled
- Disabled From version 60: this feature is behind the
layout.css.font-variations.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
|
No |
49 |
No |
|
Mobile |
|
Android webview |
Chrome for Android |
Edge Mobile |
Firefox for Android |
Opera for Android |
iOS Safari |
Samsung Internet |
Basic support |
62 |
62 |
No |
60 Disabled
- 60
Disabled
- Disabled From version 60: this feature is behind the
layout.css.font-variations.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
|
Yes |
No |
No |