Cómo cargar fuentes web de manera inteligente
Utilizar fuentes personalizadas al día de hoy mejora notablemente la apariencia visual de una página web. Sin embargo, cargar fuentes web de la manera estándar puede reducir el desempeño de tu página en varias formas que tal vez no hayas considerado. Las más importantes son las siguientes:
Recursos que bloquen la presentación: Las fuentes web como todo CSS son recursos que bloquean la presentación. En el post Optimizar tiempos de carga web en archivos CSS compartimos algunos tips y técnicas esenciales para mejorar el rendimiento en la carga de archivos CSS. Puedes seguir estos pasos para obtener un mejor rendimiento y velocidad de carga en tu página web para cualquier archivo CSS.
Efecto FOIT: El manejo por defecto que aplican la mayoría de browsers al cargar fuentes externas usando (@font-face) hace que el texto desaparezca algunos segundos mientras se carga la fuente en cuestión. Esto efecto es conocido como FOIT (Flash or Invisible Text), y puede ir desde algunos pocos segundos hasta al menos 30 segundos en algunos navegadores antes de mostrar la fuente por defecto.
Es por esto que a continuación te voy a mostrar algunos tips y ténicas que optimizarán la forma como utilizas las fuentes en tus páginas web.
Utilizar tipos de fuentes modernos
Los tipos de fuentes para navegadores modernos son woff y woff2. Navegadores más antiguos soportarán fácilmente los tipos truetype y embedded-opentyp. El orden en que se declaren los recursos supondrá una mejora en la renderización ya que los tipos modernos soportan compresión y están mejor optimizados. Además, el navegador comenzará en orden por la primera declaración de fuente y si no la soporta seguirá con las demás. A continuación tienes un ejemplo del orden que se debería seguir para cargar los distintos tipos de fuentes.
/* roboto-regular - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('../fonts/roboto-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v19-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
Utilizar font-display para carga rápida
La solución al efecto FOIT consiste en utilizar la propiedad font-display de CSS con el valor swap. Otros valores para esta propiedad ocultarán el texto por algún periodo de tiempo. Al tener este valor el navegador mostrará la fuente alternativa hasta que se descargue la principal.
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
Si utilizas fuentes de google debes asegurarte que la fuente esté configurada con swap. Si no lo está puedes agregar el parámetro GET display al final del link de la fuente así.
https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap
Aunque esto soluciona el efecto FOIT el css aún siguen siendo Render-Blocking CSS. Para solucionar esto te invitamos a leer nuestro artículo Optimizar tiempos de carga web en archivos CSS.
Utilizar fuentes locales
Cuando utilizas fuentes de terceros tu página tardará más en renderizar debido a que debe descargar los recursos de otros servidores. Puedes descargar las fuentes de terceros para mejorar el tiempo de carga. Si utilizas fuentes de Google puedes descargarlas más fácil con ayuda de Google Font Helper.
Precargar fuentes con preload
Utiliza el valor preload del atributo rel para cargar la fuente más rápido. Desafortunadamente todos los navegadores no soportan este característica. Puedes ver actualmente cuáles si soportan esta característica en caniuse.com.
<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>
Si vas a utilizar esta última opción te recomiendo que leas nuestro artículo Optimizar tiempos de carga web en archivos CSS ya que hay que tener en cuenta algunas recomendaciones de compatibilidad.