Steel random fonts for printing

Solucionar Google Fonts que faltan tras un cambio de dominio en Elementor (Guía 2025)

¿Cambiastes el dominio del sitio (o pasaste de staging a producción) y de pronto desaparecieron tus Google Fonts en Elementor? Esta guía te da comprobaciones rápidas y correcciones permanentes para que tu tipografía vuelva a verse bien, rápido.


Síntomas

  • Las fuentes de cuerpo y encabezados vuelven a la predeterminada (p. ej., Arial).
  • En Network de DevTools, las solicitudes a fonts.gstatic.com o fonts.googleapis.com están bloqueadas/404/con contenido mixto.
  • Elementor muestra la familia correcta, pero en el front-end no se aplica.

Solución rápida (checklist de 5 minutos)

  1. Regenerar CSS y datos (Elementor → Tools → Regenerate CSS & Data).
  2. Vaciar todas las cachés (plugin, servidor, CDN y forzar actualización del navegador).
  3. Actualizar la URL del sitio (WP Admin → Settings → General: WordPress Address y Site Address).
  4. Reemplazar cadenas del dominio antiguo (CSS del constructor, widgets, CSS personalizado y BD).
  5. Asegurar HTTPS en todas las solicitudes de fuentes (evitar contenido mixto).

Correcciones paso a paso

1) Actualizar los archivos generados por Elementor

  1. Elementor → ToolsRegenerate CSS & Data.
  2. Elementor → Settings → Advanced:
    • CSS Print Method: prueba External File (recomendado). Si persiste, prueba Internal Embedding.
    • Load Google Fonts: déjalo en Yes si usas Google Fonts. (Si alojas fuentes localmente, pon No).
  3. Limpia caché de plugin, servidor y CDN.

2) Arreglar URLs antiguas tras el cambio de dominio

Si moviste old-domain.comnew-domain.com, el CSS de Elementor u opciones serializadas pueden seguir apuntando al dominio antiguo.

Opción A — WP-CLI (rápido y seguro)
# Ejecuta desde la raíz de WP
wp search-replace 'http://old-domain.com' 'https://new-domain.com' --all-tables --precise --report
wp search-replace 'https://old-domain.com' 'https://new-domain.com' --all-tables --precise --report

Luego regenera el CSS de Elementor y limpia las cachés.

Opción B — Reemplazo en BD vía plugin

Usa una herramienta fiable de búsqueda/reemplazo para actualizar todas las ocurrencias (incluidos widgets, ajustes del tema y CSS de Elementor). Haz copia de seguridad primero.

3) Eliminar contenido mixto (forzar HTTPS)

Asegura que los enlaces a Google Fonts usen HTTPS y añade &display=swap para un renderizado mejor:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">

Si activaste SSL recientemente, actualiza cualquier URL http:// codificada en plantillas del tema o widgets HTML.

4) Revisar CORS para fuentes alojadas localmente

Si decidiste alojar fuentes localmente y sirves .woff2 desde tu dominio o CDN, permite carga cross-origin.

Ejemplo .htaccess (Apache)
# Permitir web fonts cross-origin
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

5) Considerar alojar Google Fonts en local (rendimiento y control)

Pros: sin llamadas externas, estable tras cambios de dominio, caché más fácil. Contras: debes actualizar archivos al cambiar familias/pesos.

  1. Descarga familias/pesos necesarios (p. ej., con Google Webfonts Helper).
  2. Sube a /wp-content/uploads/fonts/ (o carpeta de assets del tema).
  3. Incluye tu hoja de estilos local y referencia las fuentes en tu CSS.
  4. En Elementor → Settings, pon Load Google Fonts en No para evitar cargas duplicadas.

Resolución de problemas con DevTools

  • Network: filtra por “font”. Busca 404/403, CORS bloqueado o URLs del dominio antiguo cacheadas.
  • Console: revisa avisos de contenido mixto, CSP o bloqueadores interfiriendo con fuentes.
  • Disable cache (con DevTools abierto) y recarga forzada.

Consejos de rendimiento

  • Usa solo pesos/estilos necesarios (p. ej., 400/600).
  • Preconecta a dominios de Google Fonts (snippet arriba).
  • Añade font-display: swap; (ya con &display=swap) para un primer pintado más rápido.

FAQ

P. ¿Un cambio de dominio rompe las Google Fonts en Elementor?
R. Puede pasar si quedan URLs antiguas en CSS generado o si HTTPS/CORS no está bien. Reemplaza dominios, regenera CSS y limpia cachés.

P. Arreglé URLs pero las fuentes aún no cargan.
R. Revisa caché/CDN, contenido mixto y que no hayas desactivado Google Fonts en Elementor mientras las sigues referenciando.

P. ¿Local vs CDN de Google?
R. Local = control y menos dependencias; CDN = simple y actualizaciones automáticas. Evita duplicar cargas.


¿Necesitas ayuda migrando sitios con Elementor o corrigiendo fuentes tras la migración? Pide ayuda experta: Contact We Design Orange →

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *