¿Cómo usar las fuentes del sistema en CSS para mejorar el rendimiento de tu sitio web?
Durante años, los sitios web solo podían utilizar fuentes disponibles en todas las computadoras, como Georgia, Verdana, Arial, Helvetica, Times New Roman, etc… Si querías usar una fuente elegante, tenías que usar imágenes.
En 2008, Safari y Firefox introdujeron la propiedad CSS @font-face y los servicios en línea comenzaron a proporcionar licencias para WebFonts. El primero fue Typekit en 2009, y luego Google Fonts se hizo muy popular gracias a su oferta gratuita.
@font-face se implementó en todos los principales navegadores, y hoy en día es un hecho en todos los dispositivos razonablemente recientes. Es decir, podemos usar cualquier fuente que deseemos usar, ya sea confiando en un servicio externo como Google Fonts, o proporcionando nuestra propia fuente durante la carga del sitio web. ¿Pero debemos hacerlo?
Si tenemos la opción, probablemente sea más conveniente utilizar las fuentes del sistema en CSS para mejorar su sitio y brindar una mejor experiencia a sus usuarios en términos de velocidad y tiempo de carga de la página.
Todo lo que cargas en tus páginas tiene un costo. Este costo es especialmente impactante en los dispositivos móviles, donde cada byte que necesita afecta el tiempo de carga y la cantidad de ancho de banda que hace que consuman sus usuarios.
La fuente debe cargarse antes de que se muestre el contenido, por lo que debe esperar a que se complete la carga de ese recurso antes de que el usuario pueda leer incluso una sola palabra que escribió.
Las fuentes del sistema (vienen cargadas ya en nuestro sistema operativo) ofrecen la gran ventaja de la velocidad y el rendimiento, y una reducción del tamaño de su página web. Pero como efecto secundario, hacen que su sitio web parezca muy familiar para cualquiera que lo mire porque están acostumbrados a ver la misma fuente todos los días en su computadora o dispositivo móvil.
Sin embargo, existen numerosas web populares que utilizan fuentes tipográficas del sistema, como por ejemplo:
- GitHub
- Medium
- Ghost
- Bootstrap
- Booking.com.
..han estado usando fuentes del sistema durante años.
Incluso el dashboard de WordPress, que ejecuta millones de sitios web, usa fuentes del sistema, y Medium, que tiene que ver con la lectura, decidió usar fuentes del sistema. Si funciona para ellos, lo más probable es que funcione para usted también.
Si se decidió por utilizar fuentes del sistema, debería agregar una línea CSS como esta a su sitio web:
body {font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Helvetica Neue",Arial,sans-serif;}
El navegador interpretará todos estos nombres de fuentes y, a partir del primero, comprobará si está disponible.
Safari y Firefox en macOS “interpretan” el -apple-system, lo que significa que utilizaran la fuente San Francisco en las versiones más nuevas, Helvetica Neue y Lucida Grande en las versiones anteriores.
Chrome ignorará esta parte y funcionará con BlinkMacSystemFont, que por defecto es OSfont (nuevamente, San Francisco en macOS).
La interfaz de usuario de Segoe se utiliza en los sistemas Windows modernos y Windows Phone, Tahoma en Windows XP, Roboto en Android, etc. para otras plataformas.
Por último, en caso de no existir en el sistema ninguna de las fuentes anteriores, Arial y sans-serif serán las fuentes alternativas.
Recuerde que esto es sólo un ejemplo, y es posible que desee cambiar el orden de aparición de la fuente en función de las necesidades de su sitio web.
