How To Add Fonts in WordPress Elementor

Sharing Is Caring:

Want to add fonts in wordpress elementor website? Let’s dive into our comprehensive step-by-step guide, where you’ll not only learn how to Add Custom Fonts in WordPress Elementor but also how to optimize them for maximum impact on your site’s aesthetics and performance.”

One thing every website needs are fonts, we can’t get away with it because we have to use them and here’s the thing if we aren’t adding them right to our websites we could actually cause a negative impact on the performance and overall load time.

So, we’re goin to break it down, we will show you the right way and best practices to add custom fonts to your WordPress Elementor Website. We’re going to get a lot of clarity because there’s a lot of ways of adding fonts that makes it quite confusing, we have many options but most of those options are the wrong way of doing it.

So we will show you the right way of adding fonts plus a trick we use to reduce our font file sizes by up to 90 percent.

For this guide we’re using Elementor as an example but this is not limited to just elementor, the same method going to be applied to other page Builders like Bricks Builder.

We have a brand new WordPress website, everything is blank we just added a page with little bits of text, and when we went to go test it on Pingdom the page size is almost one megabyte that’s pretty big for a blank page with just a few bits of text

website page size with heavy font size file uploaded

and if we go down to details we can see the reason why is that the font file sizes are close to 800 KB that is really big.

Now if we go to the second test that we did same exact website but on the page that has no fonts being loaded and you can see the significant difference this is only 30 KB, because here we don’t have any fonts being loaded.

So, now you know the impact of fonts could have on website, even it could get worse than this as well.

Right Way To Add Fonts In WordPress Elementor

So the first place to start let’s go over to Google Fonts because we know that most of you are going to be using Google fonts it’s what we also use in the very beginning, but we have three ways to add Google fonts to our websites.

First we could go ahead and do it the old way where you click on the fonts you want to install and then you copy and paste the link inside the header this is how we did it when we first started building websites years ago.

The second way of adding Google fonts will be right inside our page builder or our theme options, it’s easy and convenient for us to just go in and choose any font that we want from Google fonts.

The two methods we just discussed are the ones we should avoid, and here’s why

First off, they’re not GDPR compliant. If you’re building websites intended for viewing within Europe, then you shouldn’t use these methods because Google collects data from our websites. So, we need to be very careful for GDPR compliance.

The second concern, and a big one, is performance. When we use these methods, essentially our website is asking Google to install fonts onto it. This creates a back-and-forth interaction, and we can’t control the size of the files that Google installs.

now the right way to do this is going to be option number three and that is going to be installing our fonts locally.

Go to Google Fonts and download the font family you want to add into your website. However, it’s advisable to select only one or two fonts with a maximum of three or four variations. While you can use more fonts with variations such as Regular, Semi Bold, Bold, or Italic, but it’s not recommended and doesn’t adhere to best practices.

Now here is the most important part where you need to optimize fonts and add to your wordpress website

In WordPress Dashboard hover over Elementor> and then click on Custom Fonts

upload custom font in elementor

To upload your fonts you need to click on Add New, there you will see few options:

WOFF, WOFF2, TTF, SVG, and EOT

This might be confusing, as you may wonder about the differences and which font type you should use.

EOT

This is for old Internet Explorer if somebody is using the Internet Explorer on the old outdated Windows 7 laptop, is it really going to matter if they are seeing custom fonts or not they probably are not going to be able to tell the difference so why jeopardize your performance for somebody who really doesn’t care how anything looks because they’re seeing the worst of every website already.

SVG

SVG’s are not for fonts this is more for icons. this is super rare that you need it, think of font awesome for an example you know like a library of icons you could use it in a situation, and if you were to add an SVG font file for just regular fonts that could be more than megabyte for just one.

Now this brings us to these three WOFF, WOFF2, and TTF, this is where you need to make your decision.

TTF

So, TTF is the old school original font file. this has been used for a long time and it’s going to support all the old devices, it’s going to have the best support, but it is have the largest file size.
Google knows that it’s too large that’s the reason why they came up with WOFF.

WOFF was Google’s solution to the large TTF file sizes, WOFF was created for better performance, and WOFF is supported with all modern browsers, it supports even a bit of older devices and it supports now on Android, or you can say it support most of the devices out there.

WOFF2 is an even more optimized version of WOFF, but WOFF2 is only going to support very modern devices, there are some older devices that people also use like an older Android phones or older iPhones, plus older browsers might also have some issues with WOFF2 but, WOFF is good enough which Works across all modern browsers and devices.

Should we sacrificing performance to support really old browsers where people really don’t care about how things look? this is the option we need to weigh, now when it comes to choosing between these three (TTF, WOFF and WOFF2) we suggest to stick with these two (WOFF or WOFF2). The modern browsers are going to load the WOFF2 and as a fallback they could go ahead and revert to Wolf.

Optimize Fonts File

Let us show you the trick for reducing the font file sizes massively.

Let’s go over Font Squirrel and then go to the web font generator, now what we are going to do here is run the fonts that you got from Google, and if you bought fonts from somewhere is all going to work the same. Run it through the generator and it’s going to optimize.

add fonts in wordpress elementor-font squirrel font generator

Let’s take a look at the settings that we use to optimize it, then it’s going to spit out a much smaller version.

Font Optimization Settings

Before upload your fonts, do the settings (most important settings) take a closer look at the below image.

After these settings, now upload your fonts and give it a minute or two then hit download button to get your optimized font files.

Now if you check the font file size, you will see massive decrease in fonts file size up to 90%.

Add Fonts In Elementor

To add fonts in Elementor, just click on ‘upload’ and select the font files you’ve optimized. add fonts variations which you like to use on your website.

add custom fonts in elementor (1)

 

Disable Google Fonts

Before you dive into website Design Process and utilizing these fonts, make sure to disable google fonts to loads, you can do this simply by going to Elementor > Settings > Advanced and disable google fonts, this is new feature that elementor has added to helps to protect your website to make sure no google fonts are being loaded onto your website.

disable google fonts in elementor

Add Global Fonts in Elementor

In the Elementor editor, locate the hamburger icon at the top left corner. Click on it, then navigate to Site Settings > Global Fonts. Here, you can add your custom fonts as global fonts for your website.

In conclusion, mastering the process of adding and optimizing fonts in WordPress Elementor opens up a world of possibilities for enhancing the visual appeal and user experience of your website. With just a few simple steps, you can elevate your site’s typography to new heights, leaving a lasting impression on your visitors. So go ahead, experiment with different fonts, and unleash your creativity to create a truly stunning online presence.

Scroll to Top