Book a free 20-min call

Manuals

Elementor Font Issue Fix

·

If you have found yourself in the maddening situation of a font not loading properly on your website (yes, even a Google font), there is a known glitch with the Elementor site builder. The font displays correctly inside the editor but falls back to a plain default on the live site. The fix is to host the font on your own website as a custom font. Here is how.

The problem

How it looks on the live site, with the heading falling back to a default font:

Website hero section with the heading shown in a plain fallback font
The live site falls back to a plain default font

How it is meant to look, which displays properly in the editor but not on the live site:

Website hero section with the heading shown in the correct brand font
The correct brand font, as it appears in the editor

Overview of the fix

  1. Download the font from Google Fonts
  2. Add it as a custom font in Elementor
  3. Upload the font file and publish
  4. Point your site settings at the local font

Step 1: Download the font from Google Fonts

Find your font on the Google Fonts website and click Get font.

Google Fonts page for Roboto Slab with the Get font button highlighted
Find the font on Google Fonts and click Get font

Then click Download all to save the font files to your computer.

Google Fonts selection panel with the Download all button highlighted
Download all saves the font files to your computer

Step 2: Add it as a custom font in Elementor

In your website dashboard, go to Elementor, then Custom Fonts.

WordPress admin menu with Elementor Custom Fonts highlighted
Custom Fonts sits in the Elementor menu

Click Add New Font.

Elementor Custom Fonts screen with the Add New Font button highlighted
Add New Font starts a new custom font entry

Name the font. We add -local to the name, such as RobotoSlab-local, to make the uploaded version easy to identify later.

Elementor custom font form with the font named RobotoSlab-local and Add Static Font and Add Variable Font buttons
Name the font with -local so you can spot it later

Step 3: Upload the font file and publish

Check the downloaded file to see whether it is static or variable. A variable font has VariableFont in the file name. Please note this fix has only been tested with variable fonts.

Downloaded font files with VariableFont highlighted in the file name
VariableFont in the name means it is a variable font

Click the matching button (Add Variable Font for a variable font), upload the file, and click Publish. The font preview should update. If it does not, check that the file URL starts with https and that forced https is turned on for your domain.

Elementor custom font with the file uploaded, the preview showing, and https highlighted in the file URL
The preview confirms the font is working, and the URL should start with https

Step 4: Point your site at the local font

Finally, update the font settings on your pages or in Site Settings to use the local font you just uploaded (the one with -local in the name). The correct font now loads from your own website instead of relying on the glitchy external load.

Quick tips

  • Update the global fonts in Site Settings rather than page by page, so the whole site switches at once
  • Clear your site cache after switching, since cached pages can keep showing the old font
  • Keep the downloaded font files somewhere safe in case you need to re upload them
  • If the font still will not load, contact us and we will take a look

Still stuck? Ask a human and you’ll hear back within 24 to 48 hours.

all manuals

Keep going

More manuals