Las fuentes dan un estilo característico a nuestra web. Los diseñadores suelen hacer uso de fuentes, o incluso algunos clientes tienen fuentes corporativas, como seña de identidad de su imagen de marca.
Últimamente se utilizan mucho las Fuentes de Google o Google Fonts. Un extenso catálogo de fuentes donde podemos elegir las familias, los tipos, etc…
Suelen quedar muy bonitas, pero luego llega el pánico cuando metes la URL en una herramienta tipo Google PageSpeed Insights y te sale la alerta de Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página.
Ahí aparece tu fuente, bloqueando la visualización del contenido de la mitad superior de la página. Y es cuando te preguntas, ¿cómo puedo solucionar esto? La respuesta puede ir en dos sentidos:
- O lo asumes por imperativo de diseño
- O utilizas alguna estrategia como google font loader para cargar la fuente en diferido. Ésto último pasa el filtro de PageSpeed Insights, pero te encontrarás con el FOUT, un efecto (a mi parecer horrible) de un pequeño «flash» de apenas milisegundos, donde ves que primero tienes una fuente y cuando el font loader entra en acción, la cambia al vuelo por la fuente de Google.
Puedes consultar esta entrada donde hablo un poco más en profundidad sobre esto.
Normalmente suelo recomendar vivir con ello si quieres utilizar una fuente de Google si o si. Carga la fuente en el head como debe ser, vive con esa alerta de PageSpeed Insights, y olvídate del font loader. Utiliza los resource hints (preload y/o dns-prefetch) para minimizar el impacto y listo
Fuentes de sistema ¿al rescate?
Si no tienes que utilizar una fuente por imperativo de diseño, o porque tu cliente no dispone de fuentes corporativas, plantéate el uso de fuentes de sistema.
Cada sistema operativo dispone de fuentes nativas. No requieren de tiempo de descarga por parte del navegador, porque son propias. Por lo tanto, si hacemos uso de ellas, evitamos bloquear la visualización del contenido de la mitad superior de la página con una petición más, y evitamos el tiempo de descarga de estas fuentes.
Las fuentes del sistema no requieren ningún tiempo de descarga por parte del navegador. Esto puede ayudar a reducir el peso general de la página en tu sitio web. Hay estudios que dicen que las fuentes web en promedio representan alrededor del 4% del peso total de un sitio web.
Un 4% no es mucho realmente, pero es con cada granito de arena como se van consiguiendo grandes resultados de optimización. Es una pequeña mejora en nuestro WPO.
En CSS-Tricks hacen un breve resumen de las fuentes web de los sistemas operativos más utilizados:
| Sistema Operativo | Versión | System Font |
|---|---|---|
| Mac OS X | El Capitan | San Francisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Mavericks | Lucida Grande |
| Windows | Vista | Segoe UI |
| Windows | XP | Tahoma |
| Windows | 3.1 to ME | Microsoft Sans Serif |
| Android | Ice Cream Sandwich (4.0)+ | Roboto |
| Android | Cupcake (1.5) to Honeycomb (3.2.6) | Droid Sans |
| Ubuntu | All versions | Ubuntu |
He de reconocer que no queda tan bonito, pero es más práctico y rápido. Para utilizar las fuentes del sistema, añade esto a tu hoja de estilos:
html, body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", Roboto, Helvetica, "Helvetica Neue", Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif, "Apple Color Emoji";
}¿Sabes que WordPress utiliza fuentes del sistema en el panel de administración?
Pues si. No tienes más que entrar en tu panel de administración e inspeccionar un elemento. WordPress, en el panel de administración, utiliza fuentes de sistema:
body {
background: #f1f1f1;
color: #444;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 13px;
line-height: 1.4em;
min-width: 600px;
}¿Te animas a probarlas? Te ahorras una petición HTTP, te ahorras el tiempo de descarga, y al fin y al cabo estarás utilizando algo estandarizado. No tan bonito como pueda ser una fuente, pero darás otro pasito en la optimización de tu sitio web.
Puede que también te interese
