Extended System Fonts: Browser Support, Keywords, Issues

What are extended system fonts?

Extended system fonts are four CSS generic font family keywords defined by the W3C CSS Fonts Module Level 4. The keywords ui-serif, ui-sans-serif, ui-monospace, and ui-rounded each map to the operating system's default UI font for that style, so a page can match the host's native typography without shipping a web font.

Which browsers support extended system fonts?

Extended system fonts work in Safari only. Chrome, Edge, Firefox, Opera, Samsung Internet, Android Browser, and Internet Explorer do not implement the keywords and fall back to the next family in the font stack.

What are the four extended system font keywords?

Extended system fonts add four generic font family keywords to CSS, each pointing at a different style of the operating system's default UI typeface.

• ui-serif: The serif variant of the system UI font. On Apple platforms, this maps to New York. On Windows, Linux, and Android, the spec says the keyword has no system mapping, so the browser falls through to the next family.
• ui-sans-serif: The sans-serif variant. On macOS and iOS, this resolves to San Francisco, the same font the system shell uses for menus and dialogs. Without Safari support, other browsers never load this mapping.
• ui-monospace: The monospace variant. On macOS and iOS, this maps to SF Mono. On non-Apple platforms, the spec lets the browser skip the keyword if no system monospace UI font exists.
• ui-rounded: The rounded variant. iOS maps it to SF Pro Rounded, watchOS to SF Compact Rounded. macOS Safari falls back to SF Pro because macOS has no rounded system UI font, and no non-Safari browser implements this keyword.

Use the four keywords with safe fallbacks so non-Safari browsers still pick a sensible UI font:

/* Use the four ui-* keywords with safe fallbacks. */
.ui-text {
  font-family: ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

.ui-mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

.ui-rounded-badge {
  font-family: ui-rounded, "SF Pro Rounded", "Helvetica Neue",
    sans-serif;
}

What are the use cases of extended system fonts?

Extended system fonts are used when a web app wants to look like a native Apple application without shipping a custom web font.

• Native-looking dashboards: Apple-targeted SaaS dashboards use ui-sans-serif so the interface matches the macOS or iOS shell. Slack, Linear, and Notion ship a similar pattern in their system font stacks.
• Performance: A system font skips the font download, removes a network request, and avoids the FOIT or FOUT flash on first paint, so the page paints faster on slow connections.
• Code blocks: ui-monospace shows code in the platform's native console font, such as SF Mono on macOS, instead of a generic monospace family that can look out of place in a developer tool.
• Friendly UI controls: ui-rounded gives buttons, badges, and tags the SF Pro Rounded look on iOS and watchOS without licensing or hosting the typeface.

What are the known issues with extended system fonts?

Extended system fonts ship in Safari only, so every other browser silently drops the keyword and falls back to the next family in the stack. A few quirks still trip up production rollouts.

• Safari-only support: Every Chromium browser, Firefox, Opera, Samsung Internet, and Internet Explorer ignore ui-serif, ui-sans-serif, ui-monospace, and ui-rounded. The font stack must always include a fallback such as -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif.
• ui-rounded is iOS-first: The rounded variant only renders on iOS, iPadOS, and watchOS. macOS Safari maps ui-rounded back to SF Pro because macOS has no rounded system UI font.
• Chrome ticket sits open: The Chromium feature request for the four ui-* keywords has been open for years with no commit timeline, and there is no Chrome flag to enable the feature today.
• No detection in CSS: CSS @supports cannot test individual font-family values. Detection has to run in JavaScript using document.fonts.check or canvas-based glyph measurement.
• Email client gap: Only Apple Mail accepts the keywords. Gmail, Outlook, and Yahoo Mail strip them or render them as plain sans-serif, so HTML email needs a wider system font stack.

In my experience, the safest font stack puts system-ui first, then -apple-system and BlinkMacSystemFont, then ui-sans-serif as the third entry, and a regular family chain after that, so non-Safari browsers never reach for a missing UI keyword.

Citations

All extended system fonts version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - font-family CSS property: developer.mozilla.org/en-US/docs/Web/CSS/font-family
• W3C CSS Fonts Module Level 4 - generic font families: drafts.csswg.org/css-fonts/#generic-font-families
• W3C TR - CSS Fonts Module Level 4: w3.org/TR/css-fonts-4
• WebKit - New WebKit Features in Safari 13.1: webkit.org/blog/10247/new-webkit-features-in-safari-13-1
• csswg-drafts GitHub - system-ui-serif, system-ui-monospace, system-ui-rounded proposal: github.com/w3c/csswg-drafts/issues/4107
• Apple Developer - San Francisco fonts: developer.apple.com/fonts
• Apple Developer - Human Interface Guidelines, Typography: developer.apple.com/design/human-interface-guidelines/typography
• MDN Web Docs - CSS at-rule, @supports: developer.mozilla.org/en-US/docs/Web/CSS/@supports
• MDN Web Docs - FontFaceSet.check method: developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/check
• Wikipedia - San Francisco (typeface): en.wikipedia.org/wiki/San_Francisco_(sans-serif_typeface)