¿Ha pasado su sitio por GTmetrix y ha visto errores de Google Fonts? No es el único. Las solicitudes externas a fonts.googleapis.com ralentizan la carga, y los plugins de caché como WP Rocket o WP Fastest Cache no pueden comprimir recursos alojados en un servidor ajeno.

Desde 2022, hay otra razón: un tribunal alemán dictaminó que cargar Google Fonts de forma dinámica infringe el RGPD, porque las direcciones IP de los visitantes se transmiten a servidores de Google en EE. UU. sin consentimiento. Alojar las fuentes en su propio servidor resuelve tres problemas a la vez: el rendimiento en GTmetrix, el cumplimiento del RGPD y el control total sobre la caché.

A continuación, una guía paso a paso. Desde elegir una fuente en Google Fonts hasta obtener un informe limpio en GTmetrix, sin errores de recursos externos.

💡 Resumen rápido:

• Descargue de Google Fonts los pesos de fuente que necesite
• Convierta los.ttf a WOFF2 usando Transfonter o google-webfonts-helper
• Suba los archivos a /wp-content/uploads/fonts/ por FTP
• Añada las reglas @font-face al CSS de su tema y verifique la renderización
• Vuelva a probar su sitio en GTmetrix; los errores de Google Fonts deberían haber desaparecido

Por qué debería alojar las fuentes localmente

Cuando un navegador carga una página, accede a fonts.googleapis.com, obtiene el CSS y luego descarga los archivos de fuente reales desde fonts.gstatic.com. Son al menos dos búsquedas DNS externas y dos sesiones HTTP sobre las que usted no tiene ningún control. Los plugins de caché son impotentes aquí: no puede comprimir ni diferir la carga de un recurso externo.

El alojamiento local cambia el panorama. Los archivos de fuente residen en su servidor, mismo dominio, misma CDN, mismas reglas de caché. El navegador no sale a ningún sitio externo, y GTmetrix y PageSpeed Insights dejan de quejarse por los recursos de terceros.

Y sí, el RGPD. En enero de 2022, el Tribunal Regional de Múnich dictaminó que cargar Google Fonts de forma dinámica sin el consentimiento del usuario infringe el RGPD. Una ola de demandas recorrió Europa y los propietarios de sitios empezaron a pasarse en masa al alojamiento local. Alojar las fuentes usted mismo es la solución más fiable.

Paso 1. Elija una fuente en Google Fonts

Vaya a Google Fonts y encuentre la fuente que necesita. En esta guía utilizo Roboto, una de las fuentes web más populares, con compatibilidad con cirílico.

Dos reglas para mantenerse ligero:

• Pesos mínimos. Cada peso (normal, negrita, cursiva) es un archivo independiente y una solicitud aparte. Si su diseño solo usa normal y negrita, desmarque el resto.
• Mínimo de fuentes. Limítese a una o dos fuentes por sitio. Una tercera ya es un exceso para el rendimiento, por muy bonita que se vea.

Elegí Roboto Regular (400) y Roboto Bold (700). Nada más.

Paso 2. Descargue la fuente

En la página de la fuente, haga clic en el botón «Download family». Google empaquetará todos los pesos en un archivo ZIP. La selección de pesos no importa en esta fase; el archivo contiene la familia completa de todos modos. Filtraremos después.

Descomprima el archivo. Necesitamos Roboto-Regular.ttf y Roboto-Bold.ttf.

Paso 3. Convierta las fuentes a formatos web

Los navegadores no usan.ttf directamente. Necesita los formatos WOFF y WOFF2; están comprimidos y cargan más rápido. Existen dos herramientas, ambas gratuitas.

Transfonter es un clásico: vaya a transfonter.org, haga clic en «Add fonts» y suba sus archivos.ttf.

Deje los ajustes por defecto; WOFF y WOFF2 cubren todos los navegadores modernos. EOT (para Internet Explorer antiguo) no es necesario en 2026. Haga clic en «Convert».

Google-webfonts-helper es una opción más moderna específica para Google Fonts. El servicio en gwfh.mranftl.com genera tanto los archivos WOFF2 como el CSS listo para usar con @font-face. No necesita subir las fuentes a un servidor de terceros; todo ocurre localmente en su navegador. Para fuentes con licencia y tipografías de marca, esto es relevante.

¿Qué herramienta elegir? Transfonter es más sencillo para una tarea puntual. Google-webfonts-helper es más conveniente si cambia de fuentes a menudo o trabaja con tipografías comerciales que preferiría no subir a servidores externos.

Paso 4. Suba las fuentes web a su servidor

Tras la conversión, descargue el ZIP. Dentro encontrará archivos.woff y.woff2 para cada peso. Para Roboto Regular y Bold, obtiene 4 archivos:

Súbalos mediante FTP o el gestor de archivos de su alojamiento a /wp-content/uploads/fonts/. La ruta /wp-content/uploads/ se eligió deliberadamente: las actualizaciones del núcleo y del tema no la modifican, a diferencia de la carpeta del tema.

Tras subirlos, verifique abriendo un enlace directo al archivo en su navegador:

https://your-site.com/wp-content/uploads/fonts/Roboto-Regular.woff2

El navegador debería iniciar la descarga. Si no es así, compruebe los permisos de la carpeta (deberían ser 755) y la propia ruta.

Paso 5. Añada @font-face a su CSS

El archivo ZIP de Transfonter incluye un archivo stylesheet.css, una plantilla lista para conectar la fuente. Ábralo y copie el contenido.

Pegue el código al principio del style.css de su tema activo (o custom.css si su tema lo admite). Use rutas a los archivos en su servidor en producción, no las del archivo. Sustituya las URL relativas por absolutas:

Código original de stylesheet.css:

1
src: url('Roboto-Bold.woff2') format('woff2'),
2
     url('Roboto-Bold.woff') format('woff');

Cámbielo por:

1
src: url('https://your-site.com/wp-content/uploads/fonts/Roboto-Bold.woff2') format('woff2'),
2
     url('https://your-site.com/wp-content/uploads/fonts/Roboto-Bold.woff') format('woff');

Sustituya your-site.com por su dominio. Repita para cada peso.

Para facilitar el uso de la fuente en su marcado, añada clases contenedoras debajo:

1
.roboto_font {
2
  font-family: "Roboto", "Arial", sans-serif;
3
}
4
 
5
.roboto_bold_font {
6
  font-family: "Roboto", "Arial", sans-serif;
7
  font-weight: bold;
8
}

Ahora cualquier elemento con la clase roboto_font o roboto_bold_font se mostrará en Roboto.

Paso 6. Verifique la representación

Cree una página de prueba (o abra una existente en modo borrador) y pegue este HTML en el editor de texto:

1
<h2>Default theme font</h2>
2
<h2 class="roboto_font">Roboto Regular — custom font</h2>
3
<h2 class="roboto_bold_font">Roboto Bold — bold weight</h2>

Abra la vista previa. El primer encabezado usa la fuente predeterminada del tema; el segundo y el tercero usan Roboto.

Si la fuente no se carga, abra la consola del navegador (F12 → Red) y verifique que los archivos WOFF2 se estén cargando desde su dominio, no desde fonts.gstatic.com. El código de respuesta debe ser 200 y el tipo debe ser font/woff2.

Paso 7. Establecer la fuente como predeterminada

Para aplicar Roboto en todo el sitio sin añadir clases a cada encabezado, agregue esto a style.css:

1
body {
2
  font-family: "Roboto", "Arial", sans-serif;
3
}

Precaución: si su tema ya usa una fuente personalizada, busque las líneas font-family en style.css y reemplácelas. Simplemente añadir una regla body encima de una existente crea un conflicto. Asegúrese de que las declaraciones antiguas se eliminen o se comenten.

Paso 8. Configurar una pila de fuentes de respaldo

Las Google Fonts no son fuentes del sistema. Si el navegador no puede cargarlas (el visitante está desconectado, tiene un bloqueador de anuncios o hay un fallo temporal), la página se quedará sin texto. La solución es una pila de fuentes.

Incorrecto:

1
font-family: 'Roboto';

Correcto, con fuentes de respaldo:

1
font-family: 'Roboto', Arial, sans-serif;

El navegador intenta usar Roboto. Si falla, recurre a Arial. ¿No hay Arial? Usa la sans-serif del sistema. La página siempre es legible, incluso si la fuente personalizada no se carga.

Paso 9. Volver a probar su sitio en GTmetrix

Ejecute GTmetrix de nuevo. La sección «Waterfall» ya no debería mostrar solicitudes a fonts.googleapis.com o fonts.gstatic.com. El error «Servir activos estáticos con una política de caché eficiente» para las fuentes también desaparece porque esos activos ahora están en su servidor y se almacenan en caché según sus reglas.

Si persisten los errores, revise la pestaña Waterfall. Es posible que un tema o plugin (por ejemplo, Elementor) todavía esté extrayendo fuentes de la CDN de Google. La siguiente sección le ayudará.

Alternativa para los perezosos: el plugin Local Google Fonts

Si no quiere lidiar con FTP y CSS, existe el plugin Local Google Fonts. Encuentra automáticamente todas las Google Fonts utilizadas por su tema y plugins, las descarga y las sirve desde su servidor.

Ventajas: instalar, activar y olvidarse. Desventajas: solo funciona con Google Fonts (no con otras fuentes externas) y no ofrece un control detallado sobre los formatos. Para la mayoría de los sitios WordPress, es más que suficiente.

Video útil sobre el tema

En inglés con una demostración visual de cada paso, desde la elección de una fuente hasta el CSS final:

⁉️🤔 Preguntas frecuentes

¿Es obligatorio autoalojar las fuentes en 2026?

Desde el punto de vista legal, sí, si tiene visitantes de la UE. El tribunal de Múnich sentó un precedente en 2022 y desde entonces decenas de tribunales alemanes lo han confirmado: cargar dinámicamente Google Fonts sin consentimiento equivale a una violación del RGPD. Desde el punto de vista del rendimiento, también: dos búsquedas DNS adicionales y un recurso externo no cacheable no hacen que su sitio sea más rápido. Autoalojar las fuentes resuelve ambos problemas a la vez. El plugin Local Google Fonts lleva 5 minutos; el método manual con Transfonter, 15. Elija según su disposición a usar FTP.

Google-webfonts-helper o Transfonter: ¿cuál es mejor?

Para una conexión puntual de una sola fuente, casi no hay diferencia. Transfonter es más simple: suba el.ttf, obtenga WOFF2 y CSS. Google-webfonts-helper es más cómodo cuando se cambian fuentes con frecuencia: no sube archivos a un servidor de terceros y genera inmediatamente un @font-face listo para usar con las rutas correctas. Para fuentes con licencia comercial, solo google-webfonts-helper.

¿Qué pasa si las fuentes no se muestran después de subirlas localmente?

Tres causas típicas. Primera, ruta incorrecta en url(): compruebe que el enlace se abre en el navegador y devuelve un archivo, no un 404. Segunda, CORS: si las fuentes se cargan desde un CDN o subdominio, el servidor debe devolver la cabecera Access-Control-Allow-Origin. Tercera, conflicto con el tema: abra DevTools (F12 → Computed), busque un elemento con su fuente y vea qué font-family se está aplicando realmente. A menudo el tema la sobrescribe más abajo en la cascada.

¿Puedo alojar las fuentes en un CDN en lugar de en mi propio servidor?

Sí, pero el CDN debe ser suyo. El principio clave es que las fuentes deben servirse desde el mismo dominio (o subdominio) que su sitio, sin solicitudes cruzadas a servidores de terceros. Así el almacenamiento en caché funciona y no se infringe el RGPD.

¿Cómo verifico que las fuentes se están cargando realmente de forma local?

Abra DevTools → Network → pestaña Font. Refresque la página. Todas las solicitudes de fuentes deben dirigirse a su dominio. Si ve fonts.googleapis.com o fonts.gstatic.com, la carga externa persiste en algún sitio. Lo más probable es que un tema o plugin aún la esté usando. Revise la configuración o instale Local Google Fonts.

Qué elegir: carga manual o plugin

Si ha llegado hasta aquí, probablemente le importa el rendimiento de su sitio. Y esa es la actitud correcta. La diferencia entre «parece rápido» y «GTmetrix Grado A» a menudo se reduce a pequeños detalles como las fuentes externas.

Para obtener resultados rápidos, instale Local Google Fonts. Cinco minutos y las solicitudes externas a Google desaparecen.

Para tener un control total sobre formatos, almacenamiento en caché y pilas de respaldo, opte por el método manual con Transfonter o google-webfonts-helper. Los mismos 15 minutos, pero conoce cada archivo en su servidor.

En cualquier caso, ejecute una prueba GTmetrix antes y después. Las capturas de pantalla del «antes» y el «después» son la mejor forma de confirmar que no hizo todo esto para nada.