Imagina:
Habilitado por defecto en Chrome 56, system-ui es un nombre de fuente especial que le indica a Chrome usar la fuente del sistema (ya sea Cantarell en Gnome, San Francisco en macOS, etc.).
Pero system-ui es algo nuevo; hasta donde sé, solo está disponible en las versiones más recientes de navegadores basados en Blink. Entonces, ¿qué hacer hoy en día? Esto es lo que usa Bootstrap 4:
Safari y Firefox en Mac reconocerán -apple-system y usarán la fuente del sistema de Mac, igual que system-ui, aunque no es estándar. Luego viene el estándar system-ui, pero solo disponible en Chrome 56. Las versiones antiguas de Chrome, solo en Mac, interpretarán lo mismo con BlinkMacSystemFont. Luego aparece Segoe UI, que a diferencia de las tres anteriores, es un nombre de fuente real, la que se usa en Windows desde Vista. Después viene Roboto para Android, Helvetica Neue para algunas versiones de macOS, y Arial para Windows antiguo.
Pero, pero… ¿dónde está la fuente de Gnome, insensible ignorante?
Si quieres, todavía puedes agregar Droid Sans para Android antiguo, Fira Sans para Firefox OS, y tal vez Lucida Grande para algunas versiones viejas de macOS. Ok, la lista es larga, pero solo tienes que escribirla una vez. También puedes definir la lista usando @font-face.
Haz tu propia lista, decide qué plataformas no te importan y úsala como predeterminada en tus proyectos. ¡Pero no seas insensible e incluye a Cantarell en la lista!
Por supuesto, si tu sitio intenta vender algo o transmitir un mensaje, y si realmente te importa, entonces considera elegir una fuente bonita (ajustar espaciado de letras, bla bla). Para resumir, quizá algo así:
