How To Preload Elementor Fonts

By James LePage
 on May 31, 2020
Last modified on January 7th, 2022

How To Preload Elementor Fonts

By James LePage
 on May 31, 2020
Last modified on January 7th, 2022

Update July, 2020: WP Rocket v3.6 recently added this functionality. Here's a tutorial on how to preload Elementor fonts with WP Rocket. While this solution still works, WP Rocket offers more value.

A common problem Elementor users will encounter when it comes to performance optimization is pre loading fonts. Surprisingly, Elementor does not pre load its Font Awesome font files (nor does it have a setting to toggle this on or off), which highly impacts your pagespeed score and loading times.

Properly optimizing icon font families is essential, as they’re large and slow loading. In many cases, preloading Elementor icons and Font Awesome icons would make a major difference in your page speed loading time.


In the above example, preloading both of the Font Awesome fonts that come shipped with Elementor could save up to 5.1 seconds.

This is the typical path of both of the font awesome .woff2 files:

  • wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-brands-400.woff2
  • wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-solid-900.woff2

When you run your Google PageSpeed report, if you haven't manually optimized Elementor, you will most likely fail the "preload key requests" audit category.

In this category, it will display all of the fonts that are not preloaded. Typically it's the font icons, the Eicons (Elementor default icons), and any custom fonts you may have installed into your website.

There are few ways to fix this. If it's just font awesome icons and you don't use that in your website, you can choose to remove font awesome from your website altogether.

This will seriously speed up your loading time, but in some cases it is impossible because you're using them in your website. Common use cases of Font Awesome icons with Elementor are for social media icons and arrows.

That means your next best option is to preload them.

The official recommendation to preload fonts is to simply add a rel=preload link attribute. It should look something like this:

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>

This explains what preloading does and why it works.

In simple terms, preloading fonts allows them to load earlier in the render process, which lets your page load quicker. Here's a good visual that shows what preloading does to fonts.

Fonts loading without rel=preload.

Fonts loading with rel=preload.

If you'd like to read more about the mechanics behind this, check out this blog post (it's where we sourced the above graphics from).

Unfortunately, with Elementor and many other fonts this is difficult to do as they are hard coded into the actual plugin. After Googling, many people come to this realization and simply leave the fonts as they are.

Luckily, there's a very simple and easy fix that will allow you to preload fonts in Elementor called Asset Clean Up. This is one of our favorite speed optimization tools, as you can use it for many different things, not just font optimization.

Asset Clean Up allows you to preload fonts by simply adding the URLs to a text field. It will do everything else for you.

The first thing you need to do is identify the URLs of the font(s) that you need to preload. This is fairly simple to do - all you need to do is run a Google PageSpeed report, and it will give you the URLs that you need to address. You can right click on them and copy the link there.

Next you need to open up the asset cleanup plugin and navigate to the “Local Fonts” tab.

This tab gives you a couple options that you can use to preload and optimize local fonts. In our case, all you need to do is paste/enter in the URL's of the font files that you need to preload. For our agency website, we've preloaded all of the Elementor fonts, as well as some custom fonts that we have installed ourselves.

A screenshot of a social media post

Description automatically generated

Now, all you need to do is click "update all settings" and run another Google PageSpeed report. The preload key requests audit should now not show as you have resolved the issue.

If you're interested in learning how to optimize your websites speed further, feel free to check out our blog what about performance optimization. If you have a slow Elementor website and need a professional speed optimization service, we offer that through our subsidiary

Finally, if you want to learn more about Google PageSpeed and how to pass all of the audits, we wrote a book called "How To Boost Your WordPress Website's PageSpeed Score" that is available on Amazon.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Notify of
Newest Most Voted
Inline Feedbacks
View all comments
3 years ago

I've tried following these exact instructions and this is not working for my Google Page Insights results. I've even tried adding the code straight to my header.php file, and viewing the page source to confirm that it is on my site. I'm stumped!

2 years ago

Adding local fonts to Asset Cleanup got rid of all the preload issues in Page Speed Insights except for one. For this font, Asset Cleanup preloads it without the question mark and beyond.


Have you seen anything like this before?

By the way, thanks for making this post.

Article By
James LePage
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram