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.
Formal definition
Related at-rule | @font-face |
---|---|
Initial value | normal |
Computed value | as specified |
Formal syntax
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 |
---|
CSS Fonts Module Level 4 # font-rend-desc |
Browser compatibility
BCD tables only load in the browser