font-feature-settings

Utilities for controlling advanced typographic features.

Examples

Basic example

Use the font-features-[<value>] utility to enable OpenType features in fonts that support them:

<!-- [!code classes:font-features-["smcp"]] -->
<p class="font-features-['smcp'] ...">This text uses small caps.</p>

Enabling multiple features

You can enable multiple OpenType features by separating them with commas:

<!-- [!code classes:font-features-["smcp","onum"]] -->
<p class="font-features-['smcp','onum'] ...">This text uses small caps and oldstyle numbers.</p>

Using CSS variables

Use the font-features-(<custom-property>) syntax to apply font feature settings from a CSS variable:

<!-- [!code classes:font-features-(--my-features)] -->
<p class="font-features-(--my-features) ...">
  <!-- ... -->
</p>

Responsive design