MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

font-variation-settings

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 valuenormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Mediavisual
Computed valueas specified
Animation typea transform
Canonical orderper 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

?

?

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)

? ? ?

See also

Document Tags and Contributors

 Contributors to this page: wbamberg, Behnam, chrisdavidmills
 Last updated by: wbamberg,