How to fix custom fonts not displaying in Elementor

Encountering custom fonts not displaying while editing WordPress pages with Elementor; what causes this and how to fix it?

Possible causes and solutions

Caching issues

It is possible that the problem is caused by caching. The solution is also relatively simple:

clear the cache::

• (Clear WordPress Cache plugin).
• Clear the server-side cache.
• Clear your browser's cache.
• Clear all cache and refresh again to see. 
• If your browser's cache is not completely cleared, try a different browser or browse in incognito mode.

HTTP/HTTPS mismatch

Font files may need to be re-uploaded if you have recently migrated from HTTP to HTTPS.

To re-upload the font file::

1. From the WP Admin backend, find theElementor > Custom FontsThe 

2. If the listed URL does not begin withhttpsStarting at the beginning, click the"Delete"The

3. Click"Upload"Re-upload the file.

4. Navigate toElementor > Tools.

5. Click"Re-generating CSS and data". The URL should now begin withhttpsopen header, and the custom fonts should appear on the front end before.
If this still doesn't work, then there may have been some other issue with the previous migration to HTTPS.

6. Navigate toElementor > Tools > Replace URLThe

7. In the right pane, find theUpdate site address (URL)Part.

8. In the Old URL field, enter the name of the URL with aHTTPSite URL. 

9. In the New URL field, enter the name of the URL withHTTPSSite URL.

10. Click "Replace URL"The

11. Scroll down and click on the"Save changes"Button.

12. Navigate to"Settings" > "General".

13. EnsureWordPress Address (URL)respond in singingThe site address (URL) starts withhttpsBeginning.

CORS error in the console

If your customized fonts are not displayed and are not available in thebrowser consoleIf you receive a CORS error, then you need to modify the CORS policy of the server; if it is a hosted type, you can ask the cloud provider where you purchased the server to modify it. 

Import Templates

If the imported template contains custom fonts, you will need to add the custom fonts manually. Template fonts will not be imported automatically.

The selected font thickness is not available

Custom fonts may not have all available font thicknesses. If you select a specific font thickness in the Layout Options, but your custom font does not have a specific thickness available, the custom font may not be displayed at all. In this case, select a different font thickness that is available for your custom font. If you don't understand, you can consult the official website.

Invalid custom code

Adding invalid custom CSS or other code can cause many different display issues, including the inability to display custom fonts. Remove or fix the incorrect code to resolve the issue.

Excluding all font variants

Different devices/browsers may require different font variations. For example, if fonts are not displayed on iOS devices, make sure you have uploaded all font variants, including .ttf .svg .woff .woff2 and .eot

If any variant is missing, one of the following may occur:

• Show default font
• Text will not appear on the website

This happens because different browsers display fonts differently. In order to ensure that the fonts are rendered consistently across all browsers, variants of all fonts need to be added so that full browser support can be achieved.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off