Guía para decidir mejor
Cómo optimizar fuentes web sin cambiar el diseño
Reduce descargas y texto invisible manteniendo la tipografía reconocible.
Optimizar fuentes web no exige cambiar la tipografía de marca. Consiste en descargar solo los archivos y variantes necesarios, entregar pronto la fuente principal y evitar texto invisible o saltos de diseño. Mide primero si las fuentes participan realmente en el retraso del LCP o del renderizado.
Haz inventario de lo que carga
En DevTools filtra por «Font» y revisa familias, pesos, estilos, tamaños, origen y solicitudes duplicadas. Una portada puede descargar seis pesos aunque solo use dos. Comprueba si la fuente llega desde tu dominio o un tercero, y si una extensión la vuelve a cargar. La guía de rendimiento de web.dev explica por qué una fuente descubierta tarde puede retrasar el texto.
Reduce sin alterar el aspecto
- Elimina variantes no usadas y conserva negritas reales si el diseño las necesita; no sustituyas todo por «faux bold» sin revisión visual.
- Sirve formatos modernos compatibles, define una pila de respaldo parecida y comprueba acentos y símbolos en español.
- Usa font-display según el compromiso entre texto visible y cambio de fuente. Revisa CLS en móvil y escritorio.
- Considera precargar únicamente la fuente crítica de la primera pantalla. Un preload innecesario compite con imágenes o CSS; si lo usas, comprueba URL, tipo y crossorigin.
- Compara capturas propias antes y después en títulos largos, botones, formularios y menú móvil; no publiques si la interfaz cambia de forma inesperada.
Ejemplo: una tienda usa una familia en títulos y otra en texto, con cuatro pesos por familia. Si solo se ven regular y semibold, recortar variantes puede ahorrar solicitudes sin tocar el diseño; la mejora dependerá de tamaño y caché reales. Consulta por qué el móvil puede sufrir más y cómo priorizar el informe de PageSpeed.
Si una fuente viene de un constructor o tema, cambia la configuración documentada y ensaya en staging; editar archivos del tema directamente puede perderse en la siguiente actualización. Para revisar tu caso, envía la URL y el dispositivo donde ves el retraso.