Guia de referência rápida para declarar fontes nativas do sistema operacional em CSS, proporcionando velocidade máxima sem carregar arquivos externos.
Pilha Universal de Fontes do Sistema
body {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
}
Mapeamento de Fontes por Plataforma
| Nome da Fonte / Token | Sistema Operacional e Navegador |
|---|---|
-apple-system |
Safari no macOS e iOS (San Francisco) |
BlinkMacSystemFont |
Chrome / Motor Blink no macOS |
"Segoe UI" |
Windows 7, 8, 10, 11 |
Roboto |
Android moderno e ChromeOS |
Oxygen |
Linux com ambiente de desktop KDE |
Ubuntu |
Linux com Ubuntu Unity / GNOME |
Cantarell |
Linux com GNOME 3+ |
"Fira Sans" |
Firefox OS / ambientes Mozilla |
"Droid Sans" |
Dispositivos Android legados |
"Helvetica Neue" |
macOS 10.9 (Mavericks) e 10.10 (Yosemite) |
sans-serif |
Fonte sans-serif de fallback universal |
Palavra-chave Genérica Moderna (system-ui)
No CSS Fonts Module Level 4, navegadores modernos suportam a palavra-chave padronizada:
body {
font-family: system-ui, sans-serif;
}