System-UI Font: Browser Support, Stack, Limitations

What is system-ui font?

system-ui is a generic font family value defined by the W3C CSS Fonts Module Level 4. It tells the browser to render text in the platform's default user interface font, such as San Francisco on macOS, Segoe UI on Windows, and Roboto on Android. The keyword resolves at render time and needs no font download.

Which browsers does system-ui font support?

system-ui works in every modern browser, with Chrome, Edge, Firefox, Opera, Safari, Samsung Internet, and Android Browser all parsing the keyword and resolving it to the operating system's default UI typeface.

What does system-ui resolve to on each operating system?

The browser does not download a font when it sees system-ui. It looks up the operating system's default UI font and uses it directly, so the typeface depends entirely on the device the page renders on.

• macOS and iOS: Resolves to San Francisco, the default Apple system typeface from macOS El Capitan and iOS 9 onward.
• Windows 7, 8, 8.1, 10: Resolves to Segoe UI, the default Windows shell font.
• Windows 11: Resolves to Segoe UI Variable, the variable font that ships with the Fluent design system.
• Stock Android: Resolves to Roboto, the default Android system font.
• Samsung One UI: Resolves to Samsung One UI Sans on Galaxy phones and tablets.
• ChromeOS: Resolves to Roboto, matching the Android default.
• Ubuntu Linux: Resolves to the Ubuntu typeface that ships with the OS.
• GNOME Linux distros: Resolves to Cantarell, the GNOME Project default.
• Asian-language Windows: Resolves to Yu Gothic UI on Japanese Windows, Microsoft JhengHei UI on Traditional Chinese, and Malgun Gothic on Korean.

How do you use system-ui in CSS?

Add system-ui as the first value in your font-family declaration and follow it with a sans-serif fallback. The browser tries system-ui first and falls back to sans-serif on platforms or browsers that do not support the keyword.

• Open your stylesheet: Edit the global CSS file or the body / :root selector that controls page typography.
• Set system-ui first in the font-family stack: Use font-family: system-ui, sans-serif so the browser picks the OS UI font when supported and falls back to its own sans-serif otherwise.
• Add an extended fallback for older browsers: Write font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif. Older Safari resolves -apple-system, legacy Edge resolves Segoe UI, and older Android resolves Roboto.
• Test the result on each OS: Open the page on macOS, Windows, and Android, and confirm the typeface matches the native UI on every platform.
• Avoid system-ui for body copy: Limit the keyword to UI labels, headings, and chrome. For long paragraphs, switch to a serif or a webfont because system-ui can render Latin text poorly when the OS UI font is a CJK glyph set.

If a browser still renders Times New Roman or the wrong font after the change, the system-ui keyword did not parse, so check that the value is unquoted and that no earlier rule overrides the body font-family.

What are the known issues with system-ui?

system-ui ships with three real-world quirks that hit production sites: poor Latin glyphs on Asian-language Windows, inconsistent metrics across operating systems, and no way to override the keyword with @font-face.

• CJK font fallback breaks Latin text: On Windows with Chinese, Japanese, or Korean as the system language, system-ui resolves to Yu Gothic UI, Microsoft JhengHei UI, or Malgun Gothic. These fonts have weak Latin glyphs and render English text with awkward spacing and weight.
• Metrics differ across operating systems: The cap height, x-height, and line-height of San Francisco, Segoe UI, and Roboto are all different. A button styled to fit "Sign in" on macOS may overflow on Windows. Pad layouts with extra room or set a fixed line-height.
• No @font-face override: You cannot map system-ui to a custom font with @font-face. The keyword always points to the OS choice. Use a font-family alias and a CSS variable when you need a single switch point.
• Older Firefox treats it as sans-serif: Firefox 43 to 91 resolved system-ui to the user-configured sans-serif font instead of the true OS UI font. The result looked correct but did not match the native UI.
• Opera Mini ignores the keyword: Opera Mini renders pages on Opera's proxy servers and substitutes its own typography. system-ui has no effect there, so always include a webfont or generic fallback.

In my experience, the CJK quirk on Windows is the most common bug report on a system-ui rollout. Latin titles look awkward on Japanese Windows even when every other OS renders them cleanly, and the simplest fix is to put an explicit Segoe UI before system-ui in the stack so Latin text gets the right font.

Citations

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

• MDN Web Docs, font-family: developer.mozilla.org/en-US/docs/Web/CSS/font-family
• W3C CSS Fonts Module Level 4, generic font families: w3.org/TR/css-fonts-4/#generic-font-families
• WebKit blog, Using the System Font in Web Content: webkit.org/blog/3709/using-the-system-font-in-web-content
• Modern Font Stacks (system-fonts): github.com/system-fonts/modern-font-stacks
• Apple Developer, Fonts: developer.apple.com/fonts
• Microsoft Learn, Segoe UI font family: learn.microsoft.com/en-us/typography/font-list/segoe-ui
• Google Fonts Knowledge, system fonts: fonts.google.com/knowledge/glossary/system_font_web_safe_font
• Wikipedia, San Francisco (sans-serif typeface): en.wikipedia.org/wiki/San_Francisco_(sans-serif_typeface)
• Wikipedia, Segoe: en.wikipedia.org/wiki/Segoe