The font-variation-settings CSS property provides low-level control over OpenType or TrueType font typographic features, by specifying the four letter axis names of the features you want to vary, along with their variation values.
/* Use the default settings */
font-variation-settings: normal;
/* Set values for OpenType axis names */
font-variation-settings: "XHGT" 0.7;
/* Global values */
font-variation-settings: inherit;
font-variation-settings: initial;
font-variation-settings: unset;
This works at an even lower level than font-feature-settings, which instead allows you to specify font feature tags and values.
Note: Whenever possible, Web authors should use other methods of controlling font display, like the
font-variant shorthand property or an associated longhand property. This property is a low-level feature designed to handle special cases where no other way to enable or access an OpenType font feature exists.| Initial value | normal |
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line. |
| Inherited | yes |
| Media | visual |
| Computed value | as specified |
| Animation type | a transform |
| Canonical order | per grammar |
Syntax
This property can take one of two forms:
- either the keyword value
normal - or a
<string>followed by a<number>. This may be repeated, with the<string> <number>tuples separated by commas.
If the <string> has more or less characters or contains characters outside the U+20 - U+7E codepoint range, the whole property is invalid. The <number> can be fractional or negative.
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.
Formal syntax
normal | [ <string> <number> ]#
Examples
TBD
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Fonts Module Level 4 The definition of 'font-variation-settings' in that specification. |
Editor's Draft | Initial definition |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support |
59.0. |
? |
53.0 (53.0) |
? | ? | ? |
| Feature | Android | Android Webview | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? |
53.0 (53.0) |
? | ? | ? |