CSS `ui-* font family`

[nileshprajapati]

Description

The CSS ui-* font family is used for the variants of the system’s user interface, allowing developers to lean on the platform’s native UI fonts (serif, sans-serif, monospace, rounded) so UI typography integrates with the operating system and feels native while remaining robust across browsers that don’t yet support the ui-* generic keywords.

• ui-serif
• ui-sans-serif
• ui-monospace
• ui-rounded
• math

.serif {
  font-family: ui-serif;
}

.sansserif {
  font-family: ui-sans-serif;
}

.monospace {
  font-family: ui-monospace;
}

. rounded {
  font-family: ui-rounded;
}

.math {
  font-family: math;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#browser_compatibility

Specification

https://www.w3.org/TR/css-fonts-4/#generic-family-name-syntax

web-feature

font-family

Test Links

No response

Additional Signals

No response

[github-actions]

This comment was automatically generated based on the information you provided. Please don't edit it.

Below is additional information about the web feature (from the web-features project) which is referenced in your proposal.
If this doesn't accurately correspond to your proposal, please update your initial comment to include web-features: <feature-id>.
To find feature IDs, use the web-features explorer.

Feature font-family

• ID: font-family
• Name: font-family
• Description: The font-family CSS property sets the desired font face for text, along with optional fallback font faces.
• Baseline status: Widely Available
• Docs: font-family
• More information: See the web-features explorer