CSS font-variation-settings Property

❮ Previous Reference Next ❯


p {
  font-variation-settings: "wdth" 50;


The font-variation-settings CSS property provides low-level control over variable font characteristics, by specifying the four letter axis names of the characteristics you want to vary, along with their values.

Default value:normal
JavaScript syntax:
object.style.fontVariationSettings="normal|string number|initial|inherit|revert|revert-layer|unset";

Standard Syntax

font-variation-settings: normal|string number|initial|inherit|revert|revert-layer|unset;

Browser Support


Property Values

The following table describes the values of this property:

Value Description
normal Text is laid out using default settings.
string number When rendering text, the list of variable font axis names is passed to the text layout engine to enable or disable font features.

Each setting is always one or more pairs consisting of a string of 4 ASCII characters followed by a number indicating the axis value to set.

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, depending on the value range available in your font, as defined by the font designer.

The following are the registered axes along with their corresponding CSS properties:

Axis Tag CSS Property
"wght" font-weight
"wdth" font-stretch
"slnt" (slant) font-style: oblique + angle
"ital" font-style: italic
"opsz" font-optical-sizing
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Default CSS Property Values

selectors {
  font-variation-settings: normal;
❮ Previous Reference Next ❯