Snelle referentiegids voor het declareren van systeemeigen lettertypen in CSS voor maximale prestaties zonder weblettertype-latentie.
Universele systeemlettertype-stack
body {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
}
Platform lettertype-toewijzing
| Lettertypenaam / Token | Besturingssysteem & Browser |
|---|---|
-apple-system |
Safari op macOS en iOS (San Francisco) |
BlinkMacSystemFont |
Chrome / Blink-engine op macOS |
"Segoe UI" |
Windows 7, 8, 10, 11 |
Roboto |
Modern Android & ChromeOS |
Oxygen |
Linux met KDE-bureaubladomgeving |
Ubuntu |
Linux met Ubuntu Unity / GNOME |
Cantarell |
Linux met GNOME 3+ |
"Fira Sans" |
Firefox OS / Mozilla-omgevingen |
"Droid Sans" |
Oudere Android-apparaten |
"Helvetica Neue" |
macOS 10.9 (Mavericks) en 10.10 (Yosemite) |
sans-serif |
Universeel sans-serif terugvallettertype |
Modern generiek sleutelwoord (system-ui)
In CSS Fonts Module Level 4 ondersteunen moderne browsers het gestandaardiseerde sleutelwoord:
body {
font-family: system-ui, sans-serif;
}