font-feature-settings

Controlling advanced typographic features in OpenType fonts.

Overview

Examples

Enable a font feature

Use font-feature-settings:* to pass OpenType feature tags directly to font-feature-settings.

<span class="font-feature-settings:'tnum'">1234567890</span>

@layer utilities {    .font-feature-settings\:\'tnum\' {        font-feature-settings: 'tnum'    }}

Reset features

Use font-feature-settings:normal when a nested element should not inherit custom feature settings.

<span class="font-feature-settings:'tnum'">    <span class="font-feature-settings:normal">Reset</span></span>

Prefer semantic numeric utilities

For common numeric features, prefer tabular-nums or related numeric utilities because they are easier to read than raw feature tags.

<span class="tabular-nums">12:45</span>

Use feature tokens

Define font-feature-* tokens when a feature combination is shared across several typographic treatments.

@theme {    --font-feature-tabular: "tnum";}

<span class="font-feature-settings:tabular">1234567890</span>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<span class="font-feature-settings:'tnum':hover font-feature-settings:normal@sm font-feature-settings:normal@print">...</span>