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 withhttpsto start, 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)cap (a poem)The 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 variants are 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.
