Optimización de Webfonts: 6 Pasos para Acelerar tu Sitio
Martin MichálekActualizado 29/9/20255 minutos lecturaEl mundo de las fuentes web es como un salón de belleza: todos queremos lo mejor, pero no siempre estamos dispuestos a esperar a que el estilista termine su trabajo. ¿Y tus visitantes? Ellos son especialmente impacientes.
Cuando las fuentes se cargan lentamente, los usuarios no ven tu texto cuidadosamente seleccionado, sino solo una página vacía o un contenido que salta de manera incómoda. Eso los convence de que tu sitio fue diseñado por un aprendiz de peluquería un viernes por la tarde.
Veamos cómo convertir las fuentes web en una ventaja en lugar de un freno para la velocidad.
¿Por qué molestarse en optimizar las fuentes?
Las fuentes no son solo una cuestión estética. Son datos digitales que los usuarios deben descargar antes de ver tu texto. Y dado que el texto suele ser una de las primeras cosas que los visitantes quieren ver, las fuentes influyen directamente en dos métricas clave:
-
Largest Contentful Paint (LCP) - el tiempo en que se renderiza el contenido visible más grande en la página. A menudo, es el texto que espera la carga de la fuente.
-
Cumulative Layout Shift (CLS) - mide cuánto "salta" el contenido durante la carga. Si la fuente se carga después del resto de la página, el texto puede cambiar de tamaño repentinamente y desordenar todo el diseño.
CLS no es una extraña abreviatura, sino un choque eléctrico para el usuario cuando el texto salta justo cuando se dispone a leer. (De nuestra optimización de fuentes para Sazka.cz)
6 pasos hacia fuentes que no ralentizan tu sitio
1. WOFF2: el único formato que necesitas hoy
Si tus fuentes todavía viajan por internet en formatos obsoletos como TTF o EOT, es hora de una actualización.
WOFF2 ofrece hasta un 30% mejor compresión que los formatos antiguos y es compatible con todos los navegadores modernos.
@font-face {
font-family: 'MiFuente';
src:
url('mifuente.woff2') format('woff2'),
url('mifuente.woff') format('woff'); /* Para navegadores del periodo jurásico */
}
Si te preocupa la compatibilidad con navegadores muy antiguos, también puedes incluir el formato WOFF, como en el ejemplo de código, aunque no es estrictamente necesario.
2. Subsetting: no sobrecargues a los usuarios con caracteres que nunca verán
La mayoría de las fuentes contienen cientos o miles de caracteres para diferentes idiomas. Si tu sitio usa principalmente texto en español, ¿por qué obligar a los visitantes a descargar soporte para chino o árabe?
Con la herramienta Glyphhanger puedes crear una versión "ligera" de la fuente que incluya solo los caracteres que realmente usas. El resultado es que la fuente puede ser hasta 10 veces más pequeña.
Un caso práctico: utilizando subsetting y reduciendo el número de estilos de fuente, reducimos el volumen de datos de las fuentes en Trenýrkárna.cz en cientos de por ciento. Lo notarás desde la primera visita.
Para sitios multilingües, puedes preparar subconjuntos específicos por idioma y cargarlos condicionalmente según el idioma actual de la página. Esto es algo que en PageSpeed.ONE hacemos como parte de nuestros análisis de velocidad.
3. Preload de fuentes críticas: prioridad para lo que el usuario verá primero
Algunas fuentes son más importantes que otras. La fuente para los encabezados H1 o el texto en la primera parte visible de la pantalla (por encima del "pliegue") merece una carga más rápida.
Con la instrucción preload puedes decirle al navegador: "Esto lo necesito lo antes posible":
<head>
<link rel="preload" href="fuente-critica.woff2" as="font" type="font/woff2" crossorigin />
</head>
Atención: Usa preload solo para fuentes realmente críticas. Cada preload consume parte del "presupuesto de velocidad" de tu sitio.
4. Detén el texto que salta: domina font-display
La propiedad font-display determina cómo se comporta el navegador cuando espera la carga de una fuente. Tienes varias opciones de valor:
-
swap– el texto se muestra primero con una fuente del sistema y cambia a la fuente web una vez cargada. Rápido, pero puede causar saltos (CLS). -
fallback– un breve período de "invisibilidad", luego una fuente del sistema y, si la fuente web se carga en un tiempo razonable, se usa. -
optional– el navegador decide si descarga y usa la fuente. Adecuado para fuentes menos importantes.
@font-face {
font-family: 'MiFuente';
src: url('mifuente.woff2') format('woff2');
font-display: fallback; /* Añade la tuya */
}
También es importante elegir una fuente de reemplazo adecuada que tenga dimensiones similares a tu fuente web. Esto minimiza los saltos de contenido al cambiar.
5. Fuentes variables: un solo archivo para gobernarlos a todos
¿Usas una fuente en tres grosores diferentes en tu sitio? El enfoque tradicional significa descargar tres archivos diferentes.
Las fuentes variables permiten tener múltiples grosores en un solo archivo, lo que puede reducir significativamente el tamaño total de los datos.
@font-face {
font-family: 'FuenteVariable';
src: url('var-font.woff2') format('woff2-variations');
font-weight: 100 900; /* Rango de grosores soportados */
}
.texto-grueso {
font-weight: 700;
}
.texto-medio {
font-weight: 400;
}
6. Lo que no se mide, no se mejora
¿Cómo saber si tus fuentes están ralentizando tu sitio? Usa Lighthouse en Chrome DevTools o nuestro monitoring PageSpeed PLUS, que te mostrará tanto la evolución del volumen de datos de las fuentes como el impacto de las fuentes en LCP y CLS.
La velocidad del sitio no es algo de una sola vez. Con cada nueva función, imagen o fuente, puede empeorar. Nuestro monitoring PageSpeed PLUS monitorea continuamente el rendimiento de tu sitio y te avisa cuando las métricas comienzan a deteriorarse.
En DevTools del navegador Chrome, puedes seguir la carga de fuentes en la pestaña "Network" y filtrar por tipo "Font".
No subestimes la optimización de fuentes en la web
La optimización de fuentes no es solo un detalle técnico: es una inversión en experiencia del usuario, SEO y conversiones.
Con las fuentes adecuadamente optimizadas, tu sitio no solo se verá genial, sino que también se cargará rápidamente y proporcionará una experiencia fluida a todos los visitantes, sin importar el dispositivo o tipo de conexión desde el que accedan.