Custom Fonts Not Displaying On Front End
There are several possible reasons why your custom fonts may not be displaying on the front end.
The problem may be a cache issue.
- If you are using a WordPress cache plugin, clear it. If your host uses server-side caching, clear it as well. You may need to ask your host to help you clear it. Finally, clear your browser’s cache. For more info on WordPress and cache, see https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens
- After clearing all cache, check again. You may need to use another browser, or a browser in incognito mode if the browser’s cache did not fully clear.
HTTP / HTTPS mis-match
If you’ve recently migrated from HTTP to HTTPS, your font files may need to be re-uploaded, so they are being served from HTTPS.
- Go to Elementor > Custom Fonts. If the URLs listed do not begin with https, click the DELETE button next to each, and then click UPLOAD buttons to re-upload the files.
- Go to Elementor > Tools and click the Regenerate CSS button
- The URLs should now begin with https and your fonts should appear on the front end.
If this is still not working, you may have encountered other issues when you previously migrated to HTTPS.
- Go to Elementor > Tools > Replace URL
- In the "Old URL field" put the site URL with HTTP and in the New URL put the site URL with HTTPS.
- Click the Replace URL button.
- Click the Save Changes button.
Finally, go to WordPress’ settings at Settings > General
Ensure both the WordPress Address (URL) and the Site Address (URL) both begin with https
CORS Error in Console
If your custom font is not showing and you receive a CORS error in your browser’s console, you need to contact your host, as they will need to modify the server’s CORS policy. In order to resolve this, changes must be made to your server. Please contact your hosting company to report this issue. Here are useful guides from external sources that you could provide to them.
If you've imported a template that included custom fonts, you will need to add the custom fonts manually, because the fonts of these templates won't be imported automatically.
Font Weight Selected Is Not Available
Custom fonts may not have all available font weights available. If you select a specific font-weight in Typography options, but your custom font does not have that specific weight available, it may not display that font at all. In this case, select a different font weight that is available for your custom font.