buildElementoradmin_panel_settingspermissionsextensionElementorhourglass_bottomloading-issuelocksslwarningcachelabelCommonwarningModerate

Elementor custom fonts not displaying

Elementor loads custom fonts through @font-face rules which reference files in the uploads folder. When the browser cannot retrieve the files, it falls back to the default system font.

The failure usually stems from URL mismatches, security blocks, or missing files. The editor may still show the font because it uses a local preview, but the front‑end relies on the generated CSS and the actual file location.

Symptoms

[dashicons-warning]
Font shows in editor only
You see the custom type in Elementor preview but the live page uses a default font.
[dashicons-admin-site]
Mixed‑content warning in console
Browser blocks font requests because they use http on an https page.
[dashicons-no]
404 or 403 for font files
Network tab shows missing or forbidden font files.
[dashicons-update]
Font appears after cache clear then disappears
Temporary fix works until cache rebuild.

Common Causes

CORS policy violation
Font is served from a different origin without Access-Control-Allow-Origin header.
Mixed‑content URLs
Font URLs still use http after site runs on https.
Stale URLs after migration
Elementor CSS still points to old domain or sub‑directory.
Caching plugin rewrites CSS
Optimization plugin removes or changes @font-face rules.
Missing or unreadable font files
Files not uploaded, placed in wrong folder, or have incorrect permissions.
Need this fixed right now?

Don't waste your day debugging. Our experts can Fix your issues in under 2 hours.*

Success Rate

100% Guaranteed

Starting from

$35 /hour
99+

Trusted by Business Owners

“I spent 3 days trying to fix the Elementor loading loop. These guys fixed it in 20 minutes. Lifesavers!”

— Sarah J., Web Designer

Related Issues

contact_mail
Contact Form 7: REST API request failed: 503 Service Unavailable
A 503 Service Unavailable response stops Contact Form 7 from sending data...
apiREST APIerror503descriptioncontact-form-7
contact_mail
Contact Form 7: REST API request failed: 429 Too Many Requests

The form tries to send data through the WordPress REST API. The...

apiREST APIerrorerrorsecurityfirewalldescriptioncontact-form-7settingsserver_configuration
contact_mail
Contact Form 7: REST API request failed: 401 Unauthorized

The form tries to send data via the WordPress REST API. The...

apiREST APIadmin_panel_settingspermissionsdescriptioncontact-form-7lock401
contact_mail
Contact Form 7: File upload error: temporary directory missing

The error appears when Contact Form 7 cannot locate a writable temporary...

codePHPcloud_offupload erroradmin_panel_settingspermissionsdescriptiontemporary filedescriptioncontact-form-7
contact_mail
Contact Form 7: Mail (2) sending failed: PHP mail() function disabled

Contact Form 7 reports a failure for Mail (2) when the PHP...

codePHPerrorerrordescriptioncontact-form-7mailMailsettingsserver_configuration
contact_mail
Contact Form 7: Mail (2) sending failed: SSL certificate verification failed

Contact Form 7 reports a failure when trying to send the secondary...

errorerrorlocksslcodecURLdescriptioncontact-form-7