CSS font-variation-settings Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

font-variation-settings: 'wght' 50;

font-variation-settings: 'wght' 850;

font-variation-settings: 'wdth' 25;

font-variation-settings: 'wdth' 75;

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

CSS

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;
}