font-variation-settings

Summary

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.

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 typeAnimating font-variation-settings is possible using a mechanism similar to animating transform: Two declarations can be animated if they feature the same set of items.
Canonical orderper grammar

Syntax

/* 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;

Values

  • 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> is a number and can be fractional or negative.
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: Behnam, chrisdavidmills
 Last updated by: Behnam,