Cómo Alojar Google Fonts Localmente en WordPress

Cargar Google Fonts desde los servidores de Google crea una conexión con terceros que transmite las direcciones IP de los visitantes. Para sitios que atienden a visitantes de la UE, esto plantea preocupaciones relacionadas con el RGPD. El alojamiento local elimina esa conexión por completo y te da control sobre el almacenamiento en caché y la entrega.

Esta guía cubre tres enfoques para alojar fuentes localmente en WordPress: la Biblioteca de Fuentes nativa para temas de bloques, implementación manual para temas clásicos y una breve nota sobre alternativas mediante plugins.

¿Por Qué Alojar Google Fonts Localmente?

Cuando los visitantes cargan tu sitio, su navegador obtiene las fuentes desde fonts.googleapis.com y fonts.gstatic.com. Cada solicitud envía su dirección IP a los servidores de Google.

El alojamiento local traslada los archivos de fuentes a tu servidor. Los beneficios incluyen:

• Cumplimiento de privacidad: Sin transferencia de datos a terceros que documentar o justificar
• Control del rendimiento: Establece tus propias cabeceras de caché y usa precarga
• Confiabilidad: Sin dependencia de servicios externos

La diferencia de rendimiento entre el CDN de Google y una configuración local bien optimizada suele ser mínima. El impulsor principal para la mayoría de los sitios es el cumplimiento del RGPD, no la velocidad.

Temas de Bloques: Usa la Biblioteca de Fuentes Nativa

WordPress 6.5+ incluye una Biblioteca de Fuentes que descarga y sirve fuentes localmente. Este es el enfoque más simple para temas de bloques.

Pasos:

1. Navega a Apariencia → Editor
2. Abre Estilos (esquina superior derecha) → Tipografía
3. Haz clic en Administrar fuentes → Instalar fuentes
4. Busca tu fuente, selecciona los pesos que necesitas y haz clic en Instalar

WordPress descarga los archivos WOFF2 a wp-content/fonts/ y los registra en la configuración de tu tema. No ocurren conexiones externas después de la instalación.

Limitaciones: Esto solo funciona con temas de bloques. Los temas clásicos requieren implementación manual.

Temas Clásicos: Implementación Manual

Para temas clásicos, descargarás las fuentes y escribirás el CSS tú mismo.

Descargar y Convertir Archivos de Fuentes

1. Visita Google Fonts, selecciona tu fuente y descárgala
2. Si tu descarga incluye archivos TTF, conviértelos a WOFF2 usando google-webfonts-helper o Transfonter
3. Sube los archivos a tu tema: wp-content/themes/tu-tema/fonts/

Registrar Fuentes con CSS

Añade esto al style.css de tu tema o a una hoja de estilos personalizada:

@font-face {
  font-family: 'Inter';
  src: url('./fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

Propiedades clave:

• font-display: swap: Muestra el texto de respaldo inmediatamente, luego lo cambia cuando la fuente carga. Previene texto invisible.
• font-weight: 100 900: Para fuentes variables, declara el rango completo de pesos en un solo archivo.

Para fuentes estáticas, crea reglas @font-face separadas para cada peso que uses.

Aplicar la Fuente

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

Siempre incluye fuentes del sistema como respaldo.

Deshabilitar la Carga Remota

Verifica que no se carguen fuentes remotas abriendo DevTools (F12), yendo a la pestaña Network, filtrando por Font y recargando. Busca solicitudes a fonts.gstatic.com.

Si tu tema carga Google Fonts remotamente, revisa su configuración para una opción de deshabilitación. De lo contrario, es posible que necesites quitar la hoja de estilos de la cola en functions.php o usar un plugin como Disable and Remove Google Fonts.

Alternativas con Plugins

Varios plugins automatizan el alojamiento local de fuentes:

• OMGF (Optimize My Google Fonts): Detecta y descarga fuentes automáticamente
• Local Google Fonts: Funcionalidad similar con soporte para subconjuntos
• WP Rocket: Incluye una opción de un clic en su configuración de Media

Los plugins funcionan bien cuando los temas o constructores de páginas cargan fuentes de formas difíciles de sobrescribir manualmente. No son obligatorios — los métodos anteriores funcionan sin ellos.

Mejores Prácticas

Prefiere WOFF2: Ofrece aproximadamente un 30% mejor compresión que WOFF y tiene más del 97% de compatibilidad con navegadores. Omite formatos más antiguos a menos que necesites soporte para IE11.

Usa fuentes variables cuando estén disponibles: Un archivo cubre todos los pesos, reduciendo las solicitudes HTTP.

Precarga con moderación: Solo precarga fuentes usadas en la parte superior de la página:

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

Incluye crossorigin condicionalmente: Solo añádelo si tu servidor envía las cabeceras CORS apropiadas.

Evita @import: Bloquea el renderizado. Usa etiquetas <link> o @font-face en su lugar.

Conclusión

Para temas de bloques, la Biblioteca de Fuentes de WordPress maneja todo — instala las fuentes a través del editor y listo. Para temas clásicos, descarga archivos WOFF2, escribe reglas @font-face y verifica que no queden conexiones remotas.

El alojamiento local te da control total sobre la entrega de fuentes y elimina las transferencias de datos a terceros. La implementación toma minutos, y el resultado es un sitio más limpio y consciente de la privacidad.

Preguntas Frecuentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.