Ontbrekende Google Fonts na een domeinwijziging in Elementor oplossen (Gids 2025)

Domein gewijzigd (of van staging naar live) en ineens zijn je Google Fonts weg in Elementor? Deze gids geeft snelle checks en blijvende fixes—zodat je typografie weer snel klopt.

Symptomen

• Body/heading-fonts vallen terug op standaard (bijv. Arial).
• In DevTools Network zijn verzoeken naar fonts.gstatic.com of fonts.googleapis.com geblokkeerd/404/mixed content.
• Elementor toont de juiste families, maar het front-end past ze niet toe.

Snelle fix (5-minuten checklist)

1. Regenerate CSS & Data (Elementor → Tools → Regenerate CSS & Data).
2. Leeg alle caches (plugin, server, CDN en harde refresh van de browser).
3. Update Site URL (WP Admin → Settings → General: WordPress Address & Site Address).
4. Vervang oude domeinstrings (builder-CSS, widgets, custom CSS, DB).
5. Zorg voor HTTPS voor alle font-requests (geen mixed content).

Stapsgewijze fixes

1) Door Elementor gegenereerde bestanden vernieuwen

1. Elementor → Tools → Regenerate CSS & Data.
2. Elementor → Settings → Advanced:
   • CSS Print Method: probeer External File (voorkeur). Anders Internal Embedding.
   • Load Google Fonts: laat op Yes als je Google Fonts gebruikt. (Bij lokaal hosten → No.)
3. Wis plugin/server/CDN-cache.

2) Oude URL’s na domeinwijziging herstellen

Na old-domain.com → new-domain.com kunnen Elementor-CSS of geserialiseerde opties nog naar het oude domein verwijzen.

# Voer uit in de WP-root
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

3) Mixed content elimineren (HTTPS forceren)

Zorg voor HTTPS-links naar Google Fonts en voeg &display=swap toe voor betere rendering:

<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">

Heb je recent SSL geactiveerd, update dan hard-coded http:// font-URL’s in thema of HTML-widgets.

4) CORS controleren voor lokaal gehoste fonts

Als je fonts lokaal host en .woff2 vanaf je domein/CDN serveert, sta cross-origin laden toe.

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

5) Google Fonts lokaal hosten overwegen (performance & controle)

Pro: geen externe calls, stabiel na domeinwijzigingen, eenvoudige caching. Contra: bestanden bijwerken bij wijzigende families/gewichten.

1. Download vereiste families/gewichten (bijv. Google Webfonts Helper).
2. Upload naar /wp-content/uploads/fonts/ (of thema-assets).
3. Koppel een lokaal stylesheet en verwijs de fonts in je CSS.
4. Zet in Elementor → Settings Load Google Fonts op No om dubbele loads te voorkomen.

Probleemoplossing met DevTools

• Network: filter op “font”. Let op 404/403, CORS-blokkades, oude URL’s in cache.
• Console: waarschuwingen over mixed content, CSP, blockers.
• Disable cache aanzetten en harde reload.

Performance-tips

• Laad alleen benodigde gewichten/stijlen (bijv. 400/600).
• Preconnect naar Google Fonts-domeinen.
• Gebruik font-display: swap; (aanwezig met &display=swap).

FAQ

V. Breekt een domeinwijziging Google Fonts in Elementor?
A. Kan, als oude URL’s in gegenereerde CSS blijven of HTTPS/CORS fout is. Vervang domeinen, regenereer CSS en leeg caches.

V. URL’s hersteld maar fonts renderen niet.
A. Controleer cache/CDN, mixed content en of Google Fonts niet is uitgeschakeld in Elementor.

V. Lokaal vs Google-CDN?
A. Lokaal = controle; CDN = eenvoud. Vermijd dubbele laadacties.

Hulp nodig bij Elementor-migraties of font-issues na een verhuizing? Neem contact op: Contact We Design Orange →