Custom Fonts Not Displaying On Front End

There are several possible reasons why your custom fonts may not be displaying on the front end.

Cache Issue

The problem may be a cache issue.

  1. 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
  2. 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. 

  1. 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.
  2. Go to Elementor > Tools and click the Regenerate CSS button
  3. 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.

  1. Go to Elementor > Tools > Replace URL
  2. In the "Old URL field" put the site URL with HTTP and in the New URL put the site URL with HTTPS.
  3. Click the Replace URL button.
  4. 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.

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

https://htaccessbook.com/increase-security-x-security-headers/



Importing Templates

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.


Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.