If Google Fonts are not displaying properly on your website, it might be due to Elementor's "Load Google Fonts Locally" feature. This setting is designed to enhance privacy and performance by downloading the font files to your server and serving them locally, instead of loading them from Google's servers.
Why This Happens
When Elementor attempts to serve fonts locally, it depends on your server being correctly configured. If there are issues such as:
- Incorrect file paths
- Fonts being loaded over HTTP instead of HTTPS
- Improper SSL certificate setup
…the fonts may fail to load entirely.
How to Fix It
Option 1: Disable Local Google Fonts
If you don’t specifically need the fonts to load locally, the quickest solution is to disable this feature:
- Go to your WordPress Dashboard.
- Navigate to Elementor → Settings → Features.
- Locate “Load Google Fonts Locally” and set it to Disabled.
- Save changes and refresh your site.
This will restore Google Fonts loading directly from Google’s servers, bypassing any local server issues.
Option 2: Troubleshoot and Fix Mixed Content Errors
If you prefer to keep this feature enabled, you’ll need to check for mixed content issues:
- Open your website in Google Chrome.
- Right-click anywhere on the page and select Inspect.
- Go to the Console tab.
- Look for Mixed Content warnings—these typically show up if your fonts are being loaded over HTTP while your site uses HTTPS.
This usually happens when an SSL certificate was installed after the WordPress site was set up, leaving old HTTP paths in the database.
How to Fix It:
To resolve this, you need to update your site URLs to HTTPS across the database. You can follow this guide for detailed steps: https://help.uicore.co/docs/uicore-framework/mixed-content-errors
