Vista previa de fuentes del sistema
Escribe un texto y compáralo en las fuentes del sistema más extendidas: ajusta el tamaño y el grosor y copia una pila de fuentes CSS lista para pegar en tu hoja de estilos.
¿Por qué usar fuentes del sistema?
Las fuentes del sistema ya están instaladas en los dispositivos de tus visitantes, así que la página no tiene que descargar ningún archivo de fuente. El texto se muestra al instante, sin el molesto «destello de texto sin estilo» (FOUT) que suelen provocar las fuentes web. Por eso GitHub, Booking.com y muchos otros sitios grandes confían en las pilas de fuentes del sistema. Un matiz: no todas las fuentes están en todos los dispositivos —Impact y Comic Sans MS, por ejemplo, faltan en muchos móviles Android, donde el navegador recurre a la fuente genérica indicada al final de la pila.
¿Cómo se usa la pila CSS copiada?
Pega la pila en la propiedad font-family de tu CSS, por ejemplo body { font-family: Georgia, "Times New Roman", serif; }. El orden importa: el navegador prueba las fuentes de izquierda a derecha y usa la primera disponible; el último valor (serif, sans-serif o monospace) es la red de seguridad que garantiza algo legible pase lo que pase. La pila «system-ui» merece una mención aparte: muestra la fuente nativa de la interfaz del dispositivo —San Francisco en Mac y iPhone, Segoe UI en Windows, Roboto en Android—, así que el aspecto cambia de un dispositivo a otro, y ahí está justamente su fuerza.