CSS font-feature-settings

The CSS font-feature-settings property is used when we need to define control on advanced typography in OpenType (a format for scalable computer fonts) fonts. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{border: 2px solid chocolate; margin-bottom: 20px; padding: 8px;}
      .one{font-feature-settings: normal;}
      .two{font-feature-settings: "smcp" on;}
      .three{font-feature-settings: "smcp" off;}
      .four{font-feature-settings: "smcp" 0;}
      .five{font-feature-settings: "smcp" 1;}
      .six{font-feature-settings: "frac";}
   </style>
</head>
<body>
   
   <div class="one">
      <h2>font-feature-settings: normal</h2>
   </div>
   <div class="two">
      <h2>font-feature-settings: "smcp" on</h2>
   </div>
   <div class="three">
      <h2>font-feature-settings: "smcp" off</h2>
   </div>
   <div class="four">
      <h2>font-feature-settings: "smcp" 0</h2>
   </div>
   <div class="five">
      <h2>font-feature-settings: "smcp" 1</h2>
   </div>
   <div>
      <h2>font-feature-settings: "frac"</h2>
      <p>234<span class="six">88</span></p>
   </div>
   
</body>
</html>

Output

font-feature-settings: normal

font-feature-settings: "smcp" on

font-feature-settings: "smcp" off

font-feature-settings: "smcp" 0

font-feature-settings: "smcp" 1

font-feature-settings: "frac"

23488

In above example, the smcp stands for small caps.

CSS font-feature-settings Syntax

The syntax of font-feature-settings property in CSS, is:

font-feature-settings: string [on|1|off|0];

The string refers to a value based on 4 ASCII characters such as "smcp" (converts the text into small-caps), "hist" (enables historical forms), and "frac" (enables automatic fraction) etc.

Note - The default value of font-feature-settings property is normal

Note - The default value of feature-value is 1. That is, if we did not provide any value from one, off, 1, and 0, after the string, then 1 will automatically get assigned. For example: font-feature-settings: "zero"; is equal to font-feature-settings: "zero" 1;

Note - The value 0 and off is used to disable, whereas 1 and on is used to enable the specified feature.

CSS Online Test

« Previous Tutorial Next Tutorial »