Font feature settings

import { ApiTable } from "@/components/api-table.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";

export const title = "font-feature-settings"; export const description = "Utilities for controlling advanced typographic features.";

]", "font-feature-settings: \;"], ["font-features-(\)", "font-feature-settings: var(\);"], ]} />

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