Corriger l’absence de Google Fonts après un changement de domaine avec Elementor (Guide 2025)

Vous avez changé de domaine (ou basculé de staging à production) et soudain vos Google Fonts ont disparu dans Elementor ? Ce guide propose des vérifications rapides et des correctifs définitifs pour rétablir votre typographie rapidement.

Symptômes

Les polices du corps et des titres reviennent à la valeur par défaut (ex. Arial).
Dans Network de DevTools, les requêtes vers fonts.gstatic.com ou fonts.googleapis.com sont bloquées/404/contenu mixte.
Elementor affiche les bonnes familles, mais le front-end ne les applique pas.

Correctif rapide (check-list 5 minutes)

Regenerate CSS & Data (Elementor → Tools → Regenerate CSS & Data).
Videz toutes les caches (plugin, serveur, CDN, et forçage du navigateur).
Mettez à jour l’URL du site (WP Admin → Settings → General : WordPress Address et Site Address).
Remplacez les anciennes URL de domaine (CSS du builder, widgets, CSS personnalisé et BD).
Assurez le HTTPS pour toutes les requêtes de polices (évitez le contenu mixte).

Correctifs pas à pas

1) Mettre à jour les fichiers générés par Elementor

Elementor → Tools → Regenerate CSS & Data.
Elementor → Settings → Advanced :
- CSS Print Method : essayez External File (préféré). Sinon, Internal Embedding.
- Load Google Fonts : laissez sur Yes si vous utilisez Google Fonts. (En local, mettez No.)
Purge de la cache plugin/serveur/CDN.

2) Corriger les anciennes URL après changement de domaine

Si vous avez déplacé old-domain.com → new-domain.com, le CSS d’Elementor ou des options sérialisées peuvent encore référencer l’ancien domaine.

Option A — WP-CLI (rapide et sûr)

# Depuis la racine 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

Regénérez ensuite le CSS d’Elementor et videz les caches.

Option B — Remplacement BD via plugin

Utilisez un outil fiable de recherche/remplacement pour toutes les occurrences (widgets, réglages du thème, CSS d’Elementor). Sauvegardez d’abord.

3) Éliminer le contenu mixte (forcer HTTPS)

Assurez des liens HTTPS vers Google Fonts et ajoutez &display=swap pour un meilleur rendu :

<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 vous avez activé récemment le SSL, mettez à jour toute URL http:// en dur dans le thème ou les widgets HTML.

4) Vérifier CORS pour des polices auto-hébergées

Si vous avez hébergé les polices localement et servez des .woff2 depuis votre domaine/CDN, autorisez le chargement cross-origin.

Exemple .htaccess (Apache)

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

5) Envisager l’hébergement local des Google Fonts (performance & contrôle)

Avantages : pas d’appels externes, stabilité après changement de domaine, cache plus simple. Inconvénients : mise à jour manuelle des familles/poids.

Téléchargez familles/poids requis (p. ex. via Google Webfonts Helper).
Chargez dans /wp-content/uploads/fonts/ (ou assets du thème).
Incluez votre feuille de style locale et référencez les polices en CSS.
Dans Elementor → Settings, passez Load Google Fonts à No pour éviter les doublons.

Dépannage avec DevTools

Network : filtrez par “font”. Cherchez 404/403, CORS, ou anciennes URL en cache.
Console : avertissements de contenu mixte, CSP, bloqueurs.
Disable cache (DevTools ouvert) et recharge forcée.

Conseils de performance

N’utilisez que les poids/styles nécessaires (ex. 400/600).
Preconnect vers les domaines Google Fonts.
Ajoutez font-display: swap; (déjà avec &display=swap).

FAQ

Q. Un changement de domaine peut-il rompre les Google Fonts dans Elementor ?
R. Oui si des URL anciennes restent dans le CSS généré ou si HTTPS/CORS n’est pas correct. Remplacez les domaines, regénérez le CSS et videz les caches.

Q. J’ai corrigé les URL mais les polices ne s’affichent pas.
R. Vérifiez cache/CDN, contenu mixte et que Google Fonts n’a pas été désactivé dans Elementor.

Q. Local vs CDN Google ?
R. Local = contrôle ; CDN = simplicité. Évitez les doubles chargements.

Besoin d’aide pour migrer des sites Elementor ou corriger les polices après migration ? Obtenez de l’aide : Contact We Design Orange →