Guía de referencia rápida para declarar pilas de fuentes nativas del sistema en CSS, logrando el máximo rendimiento sin latencia de red.
Pila universal de fuentes del sistema
body {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
}
Mapeo de fuentes por plataforma
| Token / Nombre de fuente | Sistema operativo y navegador |
|---|---|
-apple-system |
Safari en macOS e iOS (San Francisco) |
BlinkMacSystemFont |
Motor Chrome / Blink en macOS |
"Segoe UI" |
Windows 7, 8, 10, 11 |
Roboto |
Android moderno y ChromeOS |
Oxygen |
Linux con entorno de escritorio KDE |
Ubuntu |
Linux con Ubuntu Unity / GNOME |
Cantarell |
Linux con GNOME 3+ |
"Fira Sans" |
Firefox OS / entornos Mozilla |
"Droid Sans" |
Dispositivos Android antiguos |
"Helvetica Neue" |
macOS 10.9 (Mavericks) y 10.10 (Yosemite) |
sans-serif |
Fuente sans-serif de respaldo universal |
Palabra clave genérica moderna (system-ui)
En CSS Fonts Module Level 4, los navegadores modernos admiten la palabra clave genérica estandarizada:
body {
font-family: system-ui, sans-serif;
}