Optimizar fuentes web: mejora la velocidad y reduce LCP

Q: ¿Sirvo mejores resultados si uso WOFF2?

Sí. WOFF2 ofrece mejor compresión y menor tamaño, con soporte en navegadores modernos. Es la primera opción para performance.

Q: ¿Cómo evito FOIT y FOFT?

Usar font-display: swap para evitar FOIT. Para FOFT, usar preload y WOFF2 ayuda a que la fuente se cargue lo antes posible.

Optimizar fuentes web de cerca

¿Te preocupa que las fuentes estén ralentizando la web y afecten al Core Web Vitals? Para un sitio WordPress la carga de tipografías externas (especialmente Google Fonts) es una causa frecuente de LCP alto y problemas de renderizado. Esta guía práctica muestra cómo Optimizar fuentes web paso a paso con plugins sencillos, opciones seguras para principiantes y soluciones cuando Google Fonts perjudica la velocidad.

Índice

Anuncio

Puntos clave: lo que debes saber en 1 minuto

Las fuentes pueden afectar LCP: servir fuentes desde terceros y sin optimizar aumenta la latencia. Optimizar fuentes web reduce LCP y CLS.
Mejor plugin para principiantes: elegir uno que automatice self-hosting y preload evita errores. OMGF y Local Google Fonts son opciones seguras.
Pasos concretos: convertir a WOFF2, subir localmente, añadir preload y font-display: swap. Es un flujo reproducible y seguro.
Si Google Fonts ralentiza: bloquear la carga externa y servir localmente es la solución más rápida y estable.
Alternativas: usar fuentes del sistema o servicios CDN que ofrezcan WOFF2 y cumplimiento de privacidad.

Optimizar fuentes web de cerca

Mejor plugin fuentes web para principiantes

Elegir un plugin que funcione desde el primer momento es clave para principiantes. A continuación se describen opciones recomendadas, con ventajas prácticas y cuándo elegir cada una.

Opciones recomendadas y por qué son seguras

OMGF (Optimize My Google Fonts): descarga automáticamente Google Fonts, convierte a WOFF2 cuando es posible, añade reglas @font-face y permite preload. Ideal para páginas con Google Fonts sencillas. Recomendado para principiantes que quieren automatizar el self-hosting.
Local Google Fonts: plugin ligero que descarga las fuentes y configura la carga local. Menos opciones avanzadas que OMGF, pero muy estable y fácil.
WP Rocket (pago): tiene opciones integradas para optimizar la carga de Google Fonts (combinar, precargar). Buena elección si ya se usa WP Rocket.
Autoptimize: con extensiones o ajustes manuales se puede optimizar CSS y fonts; útil cuando se necesita control sobre la minificación y preload.

Comparativa rápida (práctica)

Plugin	Facilidad	Self-hosting	Preload automático	Recomendado para
OMGF	Alta	Sí	Sí	Blogs, tiendas pequeñas
Local Google Fonts	Muy alta	Sí	No (manual)	Principiantes totales
WP Rocket	Alta (de pago)	Parcial	Sí	Quienes ya usan WP Rocket
Autoptimize	Media	Manual	Manual	Usuarios con control CSS

Recomendación práctica según tipo de web

Sitio simple, blog personal: Local Google Fonts o OMGF para auto-hosting sin tocar código.
Tienda WooCommerce: OMGF o WP Rocket (si se paga WP Rocket) por su integración con precarga y optimización de recursos.
Sitios corporativos con diseñador: self-hosting + subsetting manual (ver sección de subsetting).

Anuncio

Cómo optimizar Google Fonts paso a paso

Esta sección describe un flujo reproducible y seguro para principiantes, con acciones que se pueden completar en 20–45 minutos.

Paso 1: identificar fuentes y su impacto

Ejecutar una prueba rápida con PageSpeed Insights o WebPageTest. Buscar avisos sobre "render-blocking resources" o "Third-party fonts".
En Chrome DevTools > Network filtrar por "font" para ver tiempos de carga.

Paso 2: decidir self-hosting o uso optimizado en remoto

Si la latencia del CDN de Google es la causa del problema, self-hosting suele ser la solución más segura.
Si por motivos legales/privacy se evita Google, servir fuentes locales es obligatorio.

Paso 3: usar un plugin seguro (OMGF recomendado)

Instalar y activar OMGF desde el repositorio de WordPress.
En el panel de OMGF, permitir la detección automática y ejecutar la descarga. El plugin crea archivos WOFF2 cuando sea posible.
Activar la opción de añadir preload para las familias más críticas (normalmente la familia principal y la de los títulos).

Paso 4: añadir font-display y preload

Asegurarse de que las reglas @font-face contienen font-display: swap. Esto evita FOIT (Flash of invisible text).
Preloadear la fuente más crítica (la usada en encabezado o hero) con una etiqueta . OMGF puede hacerlo automáticamente.

Paso 5: comprobar y medir

Volver a PageSpeed Insights y WebPageTest. Medir LCP, FCP y CLS antes y después.
Objetivo práctico: reducir LCP al menos 0.5–1.5s en sitios medianos; la mejora exacta depende del caso.

Código ejemplo (snippet) para font-display y preload manual

Añadir en para preload:
Ejemplo @font-face mínimo:
@font-face {
font-family: 'MiFuente';
src: url('/wp-content/uploads/fonts/mi-fuente.woff2') format('woff2');
font-weight: 400 700;
font-style: normal;
font-display: swap;
}

Guía simple para cargar fuentes locales en WordPress

Cargar fuentes locales es la opción más fiable para performance y privacidad. Pasos seguros y sin riesgos técnicos complejos, pensados para principiantes.

Preparación: elegir formatos y nombre de archivos

Preferir WOFF2 para navegadores modernos; añadir WOFF como fallback.
Nombrar archivos sin espacios, por ejemplo mi-fuente.woff2.
Subir los archivos a una carpeta dentro de uploads: /wp-content/uploads/fonts/.

Método A: con plugin (más fácil)

Instalar Local Google Fonts o OMGF.
Detectar las fuentes usadas por el tema y ejecutar la importación local.
Revisar el CSS generado y comprobar que incluye font-display: swap.

Método B: manual (control total)

Subir archivos por FTP o mediante Media > Añadir nuevo (mejor FTP o plugin de gestión de archivos para rutas claras).
Añadir el snippet @font-face en el archivo style.css del tema hijo o mediante Personalizar > CSS adicional.
Preloadear la fuente crítica (ver snippet anterior).

Flujo rápido para cargar fuentes locales

Proceso rápido: cargar fuentes locales

1️⃣

Seleccionar fuente
Elegir WOFF2 y fallback WOFF

2️⃣

Subir a uploads
/wp-content/uploads/fonts/

3️⃣

Agregar @font-face
Incluir font-display: swap

4️⃣

Preload crítico
Evitar FOIT y reducir LCP

Qué hacer si Google Fonts ralentiza el sitio

Cuando Google Fonts es la causa directa de lentitud hay pasos claros y seguros para resolverlo sin romper el diseño.

Diagnóstico rápido

Comprobar en DevTools > Network si las peticiones a fonts.googleapis.com o fonts.gstatic.com tardan >200ms.
Revisar LCP en PageSpeed Insights; si aparece referencia a fonts, es indicativo.

Soluciones ordenadas por impacto y seguridad

Self-hosting con OMGF o Local Google Fonts: solución más sencilla y eficaz.
Preloadear la fuente crítica: reduce tiempo hasta que el texto aparece con la tipografía correcta.
Cambiar a fuentes del sistema: para urgencias, reemplazar la fuente web por una stack de sistemas (Arial, system-ui) elimina la latencia.
Subsetting: generar una versión reducida de la fuente (solo glyphs necesarios) para disminuir peso.

Qué evitar como principiante

No eliminar preload sin medir.
No servir WOFF sin WOFF2 donde sea posible.
Evitar múltiples familias o pesos sin justificación (cada peso = archivo adicional).

Anuncio

Alternativas a Google Fonts fáciles de instalar

Si se busca evitar Google Fonts por privacidad o rendimiento, estas alternativas son sencillas para principiantes:

Fuentes del sistema (system fonts): no requieren descarga y son la opción más rápida. Ejemplo de stack: font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
Adobe Fonts: integración vía kit; no es self-host, pero ofrece CDN optimizado y control; revisar políticas de privacidad.
Fontsquirrel (descarga de fuentes libres): descargar y servir localmente como WOFF2.
Servicios CDN alternativos: algunos CDN privados ofrecen WOFF2 y menor latencia para regiones específicas.

Recomendación práctica

Para principiantes, la elección recomendada es: usar fuentes del sistema si la prioridad es máxima velocidad y privacidad; OMGF si se necesita mantener la misma apariencia de Google Fonts pero con mejor rendimiento.

Errores comunes al optimizar fuentes web y cómo evitarlos

Cargar demasiados pesos (400, 500, 600, 700) sin necesidad. Solución: limitar a 2 pesos.
No añadir font-display: swap. Solución: comprobar CSS generado por el plugin o añadir manualmente.
Preloadear sin crossorigin o con ruta equivocada. Solución: usar rutas absolutas correctas y crossorigin cuando la fuente está hospedada en otro dominio.
Olvidar caché y cabeceras. Solución: configurar cache-control (1 año) y compresión Brotli en el servidor/CDN.

Medir resultados: qué métricas observar

LCP (Largest Contentful Paint): la métrica principal afectada por fuentes en hero.
FCP (First Contentful Paint): mejora si el texto aparece más rápido.
CLS (Cumulative Layout Shift): puede verse afectado por cambios de fuente (evitar cambios visibles configurando font metrics y reserva de espacio).
Lighthouse / PageSpeed Insights score: comprobar antes y después.

Anuncio

Preguntas frecuentes

¿Sirvo mejores resultados si uso WOFF2?

Sí. WOFF2 ofrece mejor compresión y menor tamaño, con soporte en navegadores modernos. Es la primera opción para performance.

¿Necesito permiso de licencia para self-hosting?

Depende de la fuente. Muchas fuentes de Google Fonts son de código abierto, pero siempre comprobar la licencia. Para fuentes comerciales, revisar los términos antes de alojarlas localmente.

¿Cómo evito FOIT y FOFT?

Usar font-display: swap para evitar FOIT. Para FOFT, usar preload y WOFF2 ayuda a que la fuente se cargue lo antes posible.

¿Qué plugin es más seguro para un principiante sin experiencia técnica?

Local Google Fonts es la opción más sencilla; OMGF ofrece más automatización. Ambos funcionan bien sin tocar código.

¿Cuánto tiempo se tarda en ver mejoras de LCP?

Después de implementar self-hosting y preload, suele verse mejora inmediata en pruebas (minutos), aunque los cambios en producción pueden tardar en reflejarse por caché y CDN.

¿Es mejor usar fonts del sistema que Google Fonts?

Sí si la prioridad es velocidad y privacidad. Las fonts del sistema evitan peticiones externas; la desventaja es menos control estético.

¿Qué es el subsetting y cómo hacerlo sin ser experto?

Subsetting es eliminar caracteres no usados de la fuente. Herramientas como Glyphhanger o servicios online pueden crear subsets; algunos plugins avanzados lo soportan.

Ventajas, riesgos y errores comunes

✅ Beneficios y cuándo aplicar

Velocidad: reducir LCP y FCP aplicando self-hosting y WOFF2.
Privacidad: eliminar peticiones a Google mejora cumplimiento GDPR en muchos casos.
Control: adaptar subsetting y cache.

⚠️ Errores que debes evitar / Riesgos

Romper el diseño: cambiar fuentes sin revisar puede afectar legibilidad. Mitigar probando en staging.
Sobrecargar con pesos: cada peso suma carga. Mitigar limitar a 2–3 pesos.
No medir cambios: implementar sin métricas impide saber si se mejora. Mitigar medir antes y después.

Anuncio

Siguientes acciones

Instalar y probar Local Google Fonts u OMGF en un entorno de staging y medir LCP antes/después.
Convertir las fuentes críticas a WOFF2, añadir preload y font-display: swap.
Revisar cache-control y compresión Brotli en el hosting/CDN y validar con WebPageTest.

Jesús Barrios

Con más de 12 años de experiencia trabajando con WordPress y sus plugins, este autor ayuda a principiantes y profesionales a sacar el máximo provecho de sus sitios web. Cada artículo en Plugins WordPress ofrece consejos prácticos, guías claras y soluciones efectivas sobre backup, seguridad, SEO, marketing, optimización, velocidad y diseño, basados en experiencia real y pruebas directas. El objetivo es empoderar a los lectores para que gestionen sus sitios con confianza, mejoren el rendimiento y aprovechen al máximo todas las funcionalidades disponibles.

Aviso legal: Este sitio tiene fines informativos. WordPress® y los nombres de plugins o marcas mencionados son propiedad de sus respectivos titulares. No existe afiliación ni respaldo oficial con ninguna de las marcas citadas.