The font-variation-settings CSS property provides low-level control over OpenType or TrueType font variations, 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 valuenormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Computed valueas specified
Animation typea transform
Canonical orderper grammar


This property can take one of two forms:

  • The keyword value normal
  • A <string> followed by a <number>. This may be repeated, with the <string> <number> tuples separated by commas.


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 syntax

normal | [ <string> <number> ]#




Specification Status Comment
CSS Fonts Module Level 4
The definition of 'font-variation-settings' in that specification.
Working Draft Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support62 No1


53 — 622

FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support6262 No1


53 — 622

49114 No

1. In development.

2. From version 53 until version 62 (exclusive): 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.

3. Requires macOS 10.13 High Sierra or later.

4. Requires iOS 11 or later.

See also

Document Tags and Contributors

Last updated by: fscholz,