BugWP logo BugWP
Back to Community
Home / Community / Plugin → Custom fonts – host your fonts locally

Troubleshooting Custom Fonts Not Showing in Elementor

26 threads Sep 7, 2025 Plugin → Custom fonts – host your fonts locally

Content

Many WordPress users rely on the 'Custom Fonts – Host Your Fonts Locally' plugin to integrate their brand typography seamlessly with Elementor. However, a common and frustrating issue occurs when these custom fonts appear to upload correctly but then fail to display within the Elementor editor or on the live frontend of the site. This guide will walk you through the most common reasons for this problem and provide step-by-step solutions to get your fonts working again.

Why This Happens

Based on community reports, the issue is rarely a single bug but rather one of several common conflicts or configuration errors. The problem often arises after an update to either Elementor, the Custom Fonts plugin, or your theme. Other causes include browser caching, incorrect font file assignment, or even server-level security rules blocking font files.

Step-by-Step Troubleshooting Guide

1. Clear All Caches

This is the first and easiest step. Caching can often serve old versions of your site without the new font CSS.

  • Clear your browser cache and hard reload the page (Ctrl + F5 on Windows, Cmd + Shift + R on Mac).
  • Clear any server-level, WordPress, or CDN caching you have enabled (e.g., WP Rocket, W3 Total Cache, Cloudflare).
  • In Elementor, go to Elementor > Tools and click Regenerate CSS & Data.

2. Verify Font File Assignment

A frequent oversight is uploading font files but not properly assigning them to the font weight/style.

  • Go to Appearance > Custom Fonts.
  • Edit the problematic font.
  • Ensure every font weight (e.g., Normal 400, Bold 700) you plan to use has the corresponding font files (WOFF, WOFF2, TTF) uploaded and selected in the dropdown. A missing assignment here is a common reason the font fails to load.

3. Check for Plugin and Theme Conflicts

A conflict with another plugin or your theme is a leading cause of issues.

  • Temporarily deactivate all plugins except for Elementor and Custom Fonts.
  • If the fonts now appear, reactivate your plugins one-by-one to identify the culprit.
  • If the problem persists with only Elementor and Custom Fonts active, temporarily switch to a default WordPress theme like Twenty Twenty-One to rule out a theme conflict.

4. Investigate Browser Console Errors

Browser console errors can provide crucial clues. A common error is a CORS (Cross-Origin Resource Sharing) policy block, which means your server is preventing the font from loading.

  • On the page where the font should appear, right-click and select Inspect.
  • Navigate to the Console tab.
  • Look for red error messages, particularly any that mention "font," "CORS," or "blocked."
  • If you see a CORS error, you will likely need to contact your web hosting provider and ask them to adjust the server security headers to allow local font loading.

5. Review Recent Updates

If the problem started immediately after an update, it may be a temporary compatibility issue.

  • Check the update logs for Elementor and the Custom Fonts plugin to see if others are reporting similar problems.
  • Consider waiting for a patch if a new bug is widely reported, or temporarily roll back to a previous, stable version of the plugin if the issue is critical.

Conclusion

Font display issues can be perplexing, but they are usually solvable by methodically working through these common causes. Start with caching and file assignment, then move on to conflict testing and checking for server errors. By following this guide, you should be able to diagnose and resolve why your custom fonts are not appearing in Elementor.

Related Support Threads Support