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


CSS is a way of styling the web pages according to the consumer needs and the design you want. It provides a lot of properties to style our components or pages. The font-variant-settings is also one of those properties that is provided by CSS to style our web pages. The font-variant-settings property provides users a good and healthy low-level control over the fonts with different characteristics and properties.

Using font-variant-settings property in CSS

The font-variant-settings property can be used in three different ways by giving different types of values to it. The different ways of using this property are explained below −

  • With default Value − The normal value is the default value that is associated with the font-variant-settings property. The normal value will set the fonts to the default settings.

  • With global values − The global values that can be given to the font-variant-settings property are: inherit, initial, revert and unset.

  • With string number value.

Syntax

The below syntax will show you how you can use the font-variant-settings property in CSS −

font-variant: value; 

Let us now understand the practical implementation of the font-variant-settings property in details with the help of code example.

Steps

  • Step 1− In the first step, we will define a HTML tag with a class on which we can apply the font variant settings property and see the changes.

  • Step 2− In the next step, we will define the HTML style tag inside the head tag, in which we will write our CSS code and use the font-variant-settings property.

  • Step 3− In the last step, we will use the class given to the HTML element defined in the first step and write the CSS code to design the element.

Example

The below example will explain how to use the font-variant-settings property with the small-caps value −

<!DOCTYPE html>
<html>
<head>
   <style>
      p.result {
         font-size: 20px;
         font-weight: 600;
         text-align: center;
         font-variant: small-caps;
      }
   </style>
</head>
<body>
   <h1>Using font-variant-settings property in CSS</h1>
   <p class = "result">This is the text, which will be Changed its font style in small and capital letters. </p>
</body>
</html>

In the above example, we have used the font-variant settings property with a value of small-caps which will print the letters on the output screen in the form of the small capital letters.

Let us see one more code example in which we will use the font-variant property with a normal value given to it.

Example

The below example will illustrate the use of the font-variant-settings property with normal value −

<html>
<head>
   <style>
      p.result {
         font-size: 18px;
         font-weight: 600;
         text-align: center;
         font-variant: normal;
      }
   </style>
</head>
<body>
   <h2>Using font-variant-settings property in CSS</h2>
   <p class = "result">This is the text, Which will be Changed its font style in small and capital letters. </p>
</body>
</html>

In the above example, we have used the font-variant property with the normal value, which will not actually change the font style. Because, it is the default value that is already assigned to all the elements that is why, when we apply this property with normal value, there will be no effect on the text.

Conclusion

In this article, we have learned about how to use the font-variant-settings property in details. We have seen two code examples to see the practical implementation of this property with two different values in each one of them. In the first example, we have used the small-caps property to change the font style in small capital letters form. While, In the other example, we have used this property with a normal value that is a default value and does not reflect any changes in the text as it is the default property and text will be normal as always visible to users.

Updated on: 20-Nov-2023

57 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements