W3cubDocs

font-variation-settings

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 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:

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

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 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	Internet Explorer	Opera	Safari
Basic support	62	No¹	53	No	49	11²

Feature	Android webview	Chrome for Android	Edge mobile	Firefox for Android	Opera Android	iOS Safari	Samsung Internet
Basic support	62	62	No¹	53	49	11³	?

1. In development.

2. Requires macOS 10.13 High Sierra or later.

3. Requires iOS 11 or later.