Cómo optimizar la carga de fuentes web y mantener el texto visible

Puntos clave

Usa solo las fuentes y variantes que la página necesita.
Elige font-display según la prioridad del texto.
Ajusta la fuente de reserva para reducir el salto.
Usa preload solo para archivos concretos.

Optimizar la carga de fuentes web es equilibrar tres cosas: texto legible, el diseño previsto y una página estable. Empieza por revisar qué archivos de fuente necesita la página, cuándo llegan y qué ve el visitante mientras tanto. Una fuente que queda bien al final puede hacer que la primera visita sea difícil de usar. Esta guía forma parte de la guía de rendimiento web.

Qué ve el visitante antes de que cargue la fuente

Abre una visita nueva en una página representativa. Mira el encabezado, el texto, los botones y la navegación. ¿El texto queda en blanco, aparece con una fuente de reserva o cambia de forma después? Al texto invisible mientras carga la fuente se le llama FOIT; al cambio visible de una fuente a otra, FOUT. Anota el tamaño de pantalla y las condiciones de carga.

Prueba encabezados largos y contenido real, no solo una muestra corta del diseño. Un cambio en los saltos de línea puede bajar el botón que está debajo de un título. Repite la visita y anota si la fuente ya estaba en caché: una visita con caché esconde lo que ve un lector nuevo. Si el documento llega tarde antes de que pueda aparecer texto, el problema es otro; empieza por el TTFB.

Usa solo las fuentes que la página necesita

Anota cada familia, peso, estilo y conjunto de caracteres que usa la página. Compáralo con los archivos que pide el navegador. Pregunta si cada archivo sirve a un texto visible o a una función necesaria.

La guía de Google sobre prácticas recomendadas para fuentes explica que la declaración @font-face por sí sola no activa la descarga: la fuente se descarga cuando un estilo de la página la usa, o cuando se pide antes con preload. Revisa la hoja de estilos, no solo la URL de la fuente.

Quita variantes innecesarias solo después de revisar el diseño. Mantén los acentos, la ñ, los símbolos y los idiomas que necesitas. Un subconjunto más pequeño que pierde caracteres que usan tus clientes no compensa.

Formato y alojamiento: WOFF2, subconjuntos y fuentes propias

La guía de web.dev para optimizar las fuentes web recomienda usar WOFF2 y crear subconjuntos con los caracteres necesarios. También explica la opción de alojar las fuentes en tu propio dominio. Alojarlas tú mismo es una opción, no una garantía de velocidad: compara la entrega completa, la caché y los archivos servidos. Revisa la licencia de las fuentes antes de cambiar cómo se alojan o se modifican.

Compara también fuentes del sistema, archivos estáticos y fuentes variables según tus necesidades reales. Ninguna opción gana siempre.

Elige el comportamiento del texto con font-display

La propiedad font-display define qué pasa mientras la fuente web no está disponible:

block: oculta el texto un tiempo breve mientras espera la fuente.
swap: muestra el texto con la fuente de reserva y la cambia cuando llega la web.
fallback: espera muy poco y da un margen limitado para el cambio.
optional: puede quedarse con la fuente de reserva en esa visita si la web no llega a tiempo.

Cada opción tiene un coste. Mostrar la fuente de reserva pronto mantiene el texto legible, pero un cambio posterior puede alterar su forma. No supongas que un valor garantiza a la vez la fuente de marca y cero movimiento. Decide la prioridad para cada uso: el texto del cuerpo, un titular decorativo y una fuente de iconos pueden necesitar un trato distinto. Evita que un botón o un texto crítico quede ilegible mientras espera.

Ajusta la fuente de reserva para reducir el salto

Compara la fuente de reserva y la final en el diseño real. Mira la longitud de las líneas, el interlineado y el número de líneas de los titulares clave. Una forma distinta puede mover el contenido cercano aunque el texto fuera visible desde el principio.

Un desarrollador puede ajustar las métricas de la fuente de reserva para que ocupe un espacio parecido. Trátalo como un ajuste medido para tus fuentes, no como valores copiados de otro proyecto. Ejemplo ficticio: en una página de servicio, la fuente de reserva hace que el título ocupe tres líneas y la de marca dos. Prueba una reserva más parecida y revisa si el botón de llamada a la acción se queda en su sitio.

Los saltos que causan las imágenes y las inserciones son otro diagnóstico; los cubre la guía para reducir el CLS.

Usa preload con cuidado

Revisa en el navegador el camino de la petición de la fuente. ¿Una hoja de estilos retrasa su descubrimiento? ¿Hay una conexión externa? ¿La página pide un archivo que el texto no usa? preload puede pedir antes una fuente importante, pero también puede descargar archivos innecesarios. Identifica el archivo exacto y su uso antes de añadirlo. No precargues todos los pesos solo porque existen en el sistema de diseño.

Las fuentes compiten con otros archivos del principio de la visita, como la imagen principal. Revisa qué imágenes deben cargar primero al decidir qué es urgente. Y confirma con la guía para comprobar la caché que las visitas repetidas y las versiones nuevas de las fuentes se comportan como esperas.

Cómo optimizar las fuentes en WordPress

Un tema, un constructor o un plugin pueden añadir fuentes que se solapan con tus ajustes. Averigua quién controla cada petición antes de añadir otra fuente para la misma familia. La página publicada puede no coincidir con lo que muestra un panel de ajustes.

Si una función de WordPress añade fuentes no deseadas, usa una prueba controlada de plugins para aislar su efecto. Si un cargador de fuentes añade trabajo al navegador, revisa el tiempo de ejecución de JavaScript antes de culpar al archivo. Revisa varios tipos de página tras un cambio común: un artículo, una página de servicio y un formulario pueden usar pesos o caracteres distintos.

Comprueba el texto, el diseño y las peticiones tras publicar

Usa las mismas condiciones que en la revisión inicial. Revisa una carga nueva, una visita con caché, una pantalla estrecha y las páginas más afectadas.

Los titulares y el texto del cuerpo se leen bien.
Los botones y las etiquetas de navegación se pueden usar.
Los acentos, la ñ, los símbolos y los idiomas necesarios se muestran bien.
El cambio de fuente no provoca el movimiento original.
Se cargan los archivos previstos, sin fuentes duplicadas ni peticiones rotas.

Haz un cambio cada vez. Si cambias a la vez la familia, la hoja de estilos, el alojamiento y font-display, no sabrás qué resolvió el problema. Guarda la configuración anterior para volver atrás si un cambio común rompe una página clave.

DEX conecta la investigación de búsquedas, la planificación de contenido, la redacción de artículos y la publicación en el sitio conectado. DEX Health ayuda a revisar la calidad y el SEO de la página, también en el plan gratuito. No es un depurador de fuentes ni sustituye la prueba visual del cambio de fuente. Guarda los archivos elegidos, el plan de reserva, las condiciones de prueba y el responsable.

Preguntas frecuentes

¿font-display swap garantiza cero saltos?

No. Mantiene el texto visible, pero el cambio de fuente puede mover el diseño.

¿Debo precargar todas las fuentes?

No. Precarga solo el archivo concreto que necesita la primera vista.

¿Una fuente variable siempre pesa menos?

No. Compárala con los archivos estáticos que usa de verdad la página.

Fuentes

Optimiza las fuentes web · web.dev (Google)
Prácticas recomendadas para fuentes · web.dev (Google)

Dex SEO

Dex SEO is an AI SEO agent for small businesses. Every article here is planned from search data, drafted by Dex, fact-checked against the sources it cites, and reviewed by the team before it is published.

Cómo se hizo este artículo: planificado y redactado por Dex a partir de datos de búsqueda, verificado por Dex (3 afirmaciones revisadas) y aprobado por el equipo de Dex SEO.