Starting with Elementor v3.30.0, Google Fonts are automatically downloaded and served locally from your server. For each font, Elementor generates a CSS and WOFF2 file in the following directory:
/wp-content/uploads/elementor/google-fonts/
While this improves performance and privacy, it can cause font loading issues after migrating your website or installing an SSL certificate. Below are the steps to resolve each scenario:
Issue 1: Fonts Not Showing After Website Migration
After migration, your website may attempt to load fonts from the old domain, resulting in CORS errors or missing files.
How to Fix:
1. Check for errors in the browser console
- Open the developer tools and look for errors indicating that font files are being requested from the old domain.
2. Replace URLs in Elementor
- Go to Elementor → Tools → Replace URL
- Replace the old domain with the new domain.
3. Clear Elementor files
- Go to Elementor → Tools → General → Clear Files & Data
- This will regenerate all local fonts and CSS files using the new domain.
4. Resave theme settings
- Navigate to Theme Options and click Save.
- This step ensures that all theme-related assets are regenerated.
5. Purge any active caches
- If you’re using a caching plugin or CDN, make sure to purge the cache.
Issue 2: Fonts Not Showing After Enabling SSL
If your site has recently switched to HTTPS, Elementor may still try to load font files via HTTP, causing mixed content errors.
How to Fix:
1. Check for mixed content errors
- Open the browser console and look for errors referencing HTTP font requests on an HTTPS site.
2. Update URLs to HTTPS
- Go to Elementor → Tools → Replace URL
- Replace http://yourdomain.com with https://yourdomain.com.
- Follow this guide to fix the remaining mixed content errors on your website.
3. Clear Elementor files
- Go to Elementor → Tools → General → Clear Files & Data
4. Resave theme settings
- Navigate to Theme Options and click Save.
- This step ensures that all theme-related assets are regenerated.
5. Purge all caches
- If you’re using a caching plugin or CDN, make sure to purge the cache.
By following the above steps, you can ensure that Elementor's locally hosted Google Fonts load correctly after a migration or SSL installation.
