Resolving Custom Fonts Not Showing in Elementor Editor

Understanding the Issue with Custom Fonts in Elementor

Elementor is one of the most popular page builders in the WordPress ecosystem, allowing users to create stunning websites with ease. However, one common frustration developers and designers face is when custom fonts fail to show up in the Elementor editor. This issue can stem from various factors, including incorrect font paths, SSL mixed content issues, or caching problems.

Troubleshooting Steps

1. Verify Custom Font Paths

The first step in resolving the issue is to check if the font paths are correctly set. Elementor allows you to upload custom fonts via the Elementor settings. To do so, navigate to Elementor > Custom Fonts in your WordPress dashboard. Ensure that the paths to the font files are correct. Here’s how to check:

• Go to Elementor > Custom Fonts.
• Locate the font you uploaded.
• Check the 'Font Family' and ensure the uploaded files are listed correctly.

2. Check for SSL Mixed Content Issues

If your website is running on HTTPS, but the font files are still being linked as HTTP, you might encounter mixed content errors. This typically results in browsers blocking the font files. Use the browser's developer tools to check for any mixed content warnings. Here's how to fix it:

• Open your site in Chrome.
• Right-click and select 'Inspect'.
• Go to the 'Console' tab and look for mixed content warnings.

To resolve this, ensure all links to your custom fonts are using HTTPS. If the fonts are hosted locally, check your WordPress settings (Settings > General) to ensure your WordPress Address (URL) and Site Address (URL) are both set to HTTPS.

3. Clear Caching Plugins

Caching can often cause changes not to appear immediately in the Elementor editor. If you've recently uploaded a custom font and it isn't displaying, clear any caching that may be in place. This includes both WordPress caching plugins (like W3 Total Cache or WP Super Cache) and your browser cache.

• Clear the cache in your caching plugin.
• Go to your browser settings and clear the cached images and files.
• Refresh the Elementor editor.

4. Check Theme and Plugin Conflicts

Sometimes, conflicts with your active theme or other plugins can lead to the Elementor typography bug. To troubleshoot this, temporarily switch to a default theme like Twenty Twenty-One and deactivate all plugins except Elementor and Elementor Pro. Then, check if the custom fonts load correctly. Here’s how to do it:

• Go to Appearance > Themes and activate a default theme.
• Navigate to Plugins > Installed Plugins, and deactivate all except Elementor.
• Check if the custom fonts now appear in the Elementor editor.

5. Review Custom CSS and JavaScript

If you have added custom CSS or JavaScript to your site, it may inadvertently affect how fonts are displayed. Ensure that there are no styles overriding your custom font settings. Look for any CSS rules like `font-family` that might be applied to your text elements. Here’s a simple example of what to check:

6. Use the Correct Font Formats

Different browsers support different font formats. Be sure to upload your fonts in multiple formats such as TTF, WOFF, and WOFF2 to ensure compatibility. In Elementor, you can specify these formats when you upload the custom font under Elementor > Custom Fonts.

Conclusion

Custom fonts are a powerful way to brand your website, but issues like fonts not displaying in Elementor can disrupt your design workflow. By following the steps outlined above, you should be able to troubleshoot and fix the problems efficiently. From checking font paths and SSL issues to clearing caches and resolving conflicts, these methods will help ensure your custom fonts render correctly in Elementor.