How to use font-variant-settings property in CSS ?

Last Updated : 26 Jul, 2021

The font-variant-settings property allow users to get good low-level control over the fonts with variable characteristics. Users may specify the font letter axis name of the character whose value is to be varied.

There are two forms to specify this property, one of which is normal, and the second is string number. When the normal property is applied, the text will be laid out by the default settings. This property is a low-level mechanism that is designed such that users may set variable font features.

Syntax: The syntax for the font-variation-settings property is shown below.

font-variant-settings: normal | small-caps | initial | inherit;

Property Values:

Default_Value: To use the default settings, the value used is “normal”.
Global_Values: The global values are defined as “inherit”, “initial”, “revert” and “unset”.

Example 1: Below is the example of font-variant-settings using value “normal”.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style type="text/css"> 
        p.normal { 
            color: green; 
            padding: 7px; 
            font-weight: bold; 
            font-variant: normal; 
        } 
    </style> 
</head> 
  
<body> 
    <p class="normal"> 
        Hello, this is GeeksforGeeks!! 
    </p> 
</body> 
  
</html> 

Output:

Example 2: Below is the example of font-variant-settings using value “small-caps”.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style type="text/css"> 
        p.small { 
            color: green; 
            padding: 12px; 
            font-weight: bold; 
            font-variant: small-caps; 
        } 
    </style> 
</head> 
  
<body> 
    <p class="small"> 
        Hello, this is GeeksforGeeks!! 
    </p> 
</body> 
  
</html> 