A quick reference guide for declaring native OS system font stacks in CSS, delivering maximum rendering performance without web font network latency.
Universal System Font Stack
body {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
}
Platform Font Mapping
| Token / Font Name | Operating System & Browser Target |
|---|---|
-apple-system |
Safari on macOS (10.11+ El Capitan / San Francisco) and iOS (9+) |
BlinkMacSystemFont |
Chrome / Blink engine on macOS |
"Segoe UI" |
Windows 7, 8, 10, 11 |
Roboto |
Modern Android (4.0+) & ChromeOS |
Oxygen |
Linux with KDE desktop environment |
Ubuntu |
Linux with Ubuntu Unity / GNOME |
Cantarell |
Linux with GNOME 3+ |
"Fira Sans" |
Firefox OS / Mozilla environments |
"Droid Sans" |
Legacy Android devices (pre-4.0) |
"Helvetica Neue" |
macOS 10.9 (Mavericks) and 10.10 (Yosemite) |
sans-serif |
Universal fallback system sans-serif font |
Modern Native Generic Keyword
In CSS Fonts Module Level 4, modern browsers support the standardized generic keyword:
body {
font-family: system-ui, sans-serif;
}