System font
The font-family: system-ui CSS declaration uses the operating system default font for text.
Overview
The font-family: system-ui CSS declaration uses the operating system default font for text.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.font-family.system-ui | 56 | 79 | 92 | 11 | 56 | 11 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Implementation note
- Previously available under a different name: -apple-system (43)
- Supported on macOS only.
Notes 1 item(s)
Implementation note
- Previously available under a different name: -apple-system (9)
Notes 1 item(s)
Implementation note
- Previously available under a different name: -apple-system (9)
Syntax
CSS
body {
font-family: system-ui, -apple-system,
sans-serif;
}
.ui-text {
font-family: system-ui;
}Live demo
Use cases
Using System font
The font-family: system-ui CSS declaration uses the operating system default font for text.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features