Using Elementor Customized Font FunctionsA common problem is encountered whenCustomized fonts not displayedOn the live siteThe
There are a number of reasons for this problem, which may involveCaching, HTTP/HTTPS settings, CORS errorsetc. This article will analyze the possible causes and solutions in detail.
Possible causes and solutions
Caching issues
The problem may be caused by a caching issue.
- Clear the WordPress cache plugin (if a cache plugin is used).
- If CDN acceleration etc. is used, clear the server cache.
- Clear your browser's cache.
- After clearing all cache, check again. If your browser's cache is not completely cleared, you may need to use another browser or browse in incognito mode.
HTTP/HTTPS mismatch
If you have recently migrated from HTTP to HTTPS, you may need to re-upload theFont FilesThe
To re-upload the font file::
1. Navigate from the WordPress dashboard to theElementor > Custom FontsThe
2. if the listed URL does not begin withhttpsto start, click theremovingThe
3. Click"Upload"Re-upload the file.
4. Navigating toElementor > Tools.
5. Click"Regenerate CSS and data". url should now start withhttpsopen header, and your font should appear on the front end.
If this still doesn't work, you may have encountered other issues during your previous migration to HTTPS.
6. Navigating toElementor > Tools > Replace URLThe
7. In the right-hand pane, locate 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 a URL with the following textHTTPSSite URL.
10. click"Replace URL"The
11. Scroll down and click"Save changes"Button.
12. Navigation to"Settings" > "General".
13. EnsuringWordPress Address (URL)cap (a poem)Site Address (URL)in order tohttpsBeginning.
CORS errors in the console
If the customized font is not displayed and theCORS error received in the browser consoleYou can only change the server's CORS policy by contacting the server provider.
Problems with fonts in imported templates
If an Elementor template containing custom fonts is imported, these fonts may not be imported automatically, resulting in the fonts not being displayed.
Solution:
- Manually upload custom fonts to the Elementor > Custom Fonts. When importing a template, make sure all fonts have been added correctly.
The selected font thickness is not available
Custom fonts may not support all font thicknesses. If a font thickness is selected in the typography settings and the custom font file does not contain that thickness, the font may not display at all.
Solution:
- Select the font thickness that applies to the custom font in Elementor. If necessary, consult with the font designer to make sure you understand all the font's supported thickness options.
Invalid custom code
Invalid custom CSS or JavaScript code may affect the display of the site, including causing custom fonts to not display properly.
Solution:
- Double-check and remove potentially invalid code, especially custom CSS or JavaScript. if you can't pinpoint a code problem, temporarily disable this custom code and test if the fonts return to displaying.
All font variants not included
Different devices and browsers may handle fonts differently. Therefore, to ensure that custom fonts are displayed correctly on all devices, you need to upload all necessary font variants, including .ttf,.svg,.woff,.woff2 cap (a poem) .eotThe
Solution:
Make sure that all variants of the font file are uploaded. If any variants are missing, the following issues may result:
- Fonts fallback to default fonts
- Text does not display on the website
To avoid these problems, make sure to upload the full font variant that supports the display needs of different browsers and devices.
