CSS - font-variation-settings Property

The font-variation-settings property in CSS is used to specify the variation settings for variable fonts. Variable fonts are a type of font that can have adjustable attributes, such as weight, width, and slant, allowing for finer control over the font's appearance.

This property allows you to define the values for these font variations, using axis tags and numeric values.

Possible Values

  • normal: Text is rendered based on default settings.

  • <string> <number>:

    • <string> represented as 4 ASCII characters.

    • In case <string> value is more or less than four characters, the value becomes invalid.

    • <number> represents the axis value to be set.

    • <number> can be negative or fractional, based on the value range of the font selected.

Applies to

All the HTML elements.

DOM Syntax

object.style.fontVariationSettings = "normal | <string>";

CSS font-variant-settings - Basic Example

Here is an example:

<html>
<head>
<style>
   .container1 * {
      font-weight: 625;
   }
   .container2 * {
      font-variation-settings: 'wght' 625;
   }
   .container3 * {
      font-variation-settings: 'wght' 200;
   }
</style>
</head>
<body>
   <div class="container container1">
      <p>Variation Setting - Weight</p>
   </div>
   <div class="container container2">
      <p>Variation Setting - Weight</p>
   </div>
   <div class="container container3">
      <p>Variation Setting - Weight</p>
   </div>
</body>
</html>
Advertisements