Cómo cargar fuentes web más rápido

1. Usa WOFF2

Es el formato común más pequeño. Si todavía sirves TTF u OTF, esta es tu mejora más fácil. Usa el Generador de webfonts para convertirlas.

2. Elimina los caracteres que no usas

Muchas fuentes incluyen alfabetos que tu sitio nunca muestra. El Subsetter de fuentes conserva solo los idiomas que elijas. Revisa primero la licencia y conserva todos los idiomas que usa tu sitio.

3. Carga menos pesos

Cada peso y cada cursiva son otro archivo. Muchos sitios solo necesitan regular y negrita. Busca en tu CSS los pesos que ya no usas y elimínalos.

4. Considera una fuente variable

Si usas tres o más pesos, una fuente variable puede pesar menos que varios archivos estáticos. Puedes reducirla aún más acotando su rango de pesos en el Generador de webfonts.

5. Precarga tu fuente principal

Normalmente el navegador descubre una fuente solo después de leer tu CSS. La precarga le permite empezar antes:

<link rel="preload" href="/fonts/brand-regular.woff2" as="font" type="font/woff2" crossorigin>

Mantén el atributo crossorigin, incluso en tu propio dominio, o es posible que el archivo se descargue dos veces. Precarga solo una o dos fuentes usadas al inicio de la página.

6. Configura font-display

Esto controla lo que ven los visitantes mientras se carga una fuente. swap muestra una fuente de respaldo de inmediato, así que tu texto nunca queda invisible. optional evita un cambio tardío, pero las conexiones lentas quizá no muestren tu fuente en la primera visita.

7. Guarda las fuentes en caché durante mucho tiempo

Los archivos de fuentes rara vez cambian, así que deja que los navegadores los guarden. Añade una versión o un hash al nombre del archivo y envía:

Cache-Control: public, max-age=31536000, immutable

Mide el resultado

Analiza tu página con el Test de velocidad de página antes y después, y compara Largest Contentful Paint y el desplazamiento del diseño.