CSS font-variation-settings Property


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
Applies to
all elements. It also applies to ::first-letter and ::first-line.
Computed value
as specified
JavaScript syntax

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.


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


  • 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.


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.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 2nd January 2024