Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 30 Aug, 2021

If you want to control the advanced typographic features in open type fonts then the font-feature-settings property is very useful for the developers. 

By using this property, we can get control over advanced typographic settings like swashes, small caps, and ligatures. In order to activate them, you must declare the value in quotes followed by either 1 or on if you want to enable. If you want to disable it, then you may use either 0 or off.

Syntax:

font-feature-settings: values;

Property values: This property accepts property value which is described below.

  • values: This property refers to the values defined by OpenType feature tags like “smcp”, “smcp” on, “swsh” on, etc. It has global values as: “inherit”, “initial”, and “unset”.

Note: The default value for font-feature-settings is normal.

Example1: Below is the example that illustrates the use of font-feature-settings property using the value “hlig”.

HTML




<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      p {
        color: green;
        padding: 7px;
        font-weight: bold;
        font-feature-settings: "hlig" 4;
      }
    </style>
  </head>
 
  <body>
     
<p>GeeksforGeeks!</p>
 
  </body>
</html>

Output:

font feature to hlig

Example2: Below is the example that illustrates the use of font-feature-settings property using the value “smcp” and “swsh”.

HTML




<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      p {
        color: green;
        padding: 8px;
        font-weight: bold;
        font-style: italic;
        font-feature-settings: "smcp", "swsh" 5;
      }
    </style>
  </head>
 
  <body>
     
<p>It is a Computer Science portal</p>
 
  </body>
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!