CSS font-variation-settings Property

Description

The font-variation-settings CSS property is a crucial component of modern typography in web design. It allows precise control over variable fonts, which are typefaces with multiple axes of variation, such as weight, width, and slant. Web developers can use this property to adjust and fine-tune these axes, enabling greater typographic flexibility and creativity. By specifying specific numeric values for each axis, designers can achieve the desired visual characteristics for text, enhancing both readability and aesthetics on the web. This property has revolutionized web typography by enabling a single font file to adapt dynamically to various design requirements, reducing the need for multiple font files and improving web page performance.

Initial value
normal
Applies to
all elements. It also applies to ::first-letter and ::first-line.
Inherited
yes
Computed value
as specified
Animatable
discrete
JavaScript syntax
object.style.fontVariationSettings

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff.

Syntax

font-variation-settings: normal | <string> <number>

Values

  • normalText 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 indicating the axis value to set. If the <string> has more or fewer characters or contains characters outside the U+20 - U+7E code point 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.

Example

h1 {
  font-family: 'MyVariableFont', sans-serif;
  font-variation-settings: 'wght' 700, 'wdth' 100;
  /* 'wght' controls font weight, 'wdth' controls font width */
}

p {
  font-family: 'MyVariableFont', sans-serif;
  font-variation-settings: 'wght' 400, 'wdth' 150;
}

Browser Support

The following table will show you the current browser support for the CSS font-variation-settings property.

Desktop
Edge Chrome Firefox Opera Safari
1762624911
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
62624611862

Last updated by CSSPortal on: 2nd January 2024