How to Use Local Fonts in Elementor and Divi (and Why)

Creating a website with Elementor and Divi, you have a ton of font options thanks to the built-in Google Fonts integration offered by the two. However, for certain projects, you might want to use custom fonts instead.

Both Elementor and Divi allow you to use custom fonts. Be it local fonts or web fonts from services like Adobe Fonts and MyFonts. In this post, we will dive into how to use local fonts in Elementor and Divi.

Let’s start by understanding how Google Fonts works in Elementor and Divi.

How Google Fonts Works in Elementor and Divi

Google Fonts is a free font directory from Google. There are over 1,500 fonts available here. They are available for free under an open source license. Due to its large collection of free fonts, many design tools rely on Google Fonts to offer font options for users. Including Elementor, Divi, and other page builder plugins for WordPress.

Fonts available on Google Fonts — and the similar services — are called web fonts. When you use a certain font from Google Fonts on your page, the actual font file is still hosted on the Google server. In other words, when your page is accessed, it loads the font file from external source (Google server).

What happens when the font is failed to load? In case a web font is failed to load, your web browser will use the pre-installed fonts available on your OS. Every OS — Windows, Linux, macOS, Android, etc. — has pre-installed fonts. These fonts are called web safe fonts. Some examples of web safe fonts are Arial, Times New Roman, and Courier New.

The Benefits of Using Local Fonts

It’s important to note that the term “local fonts” in this context refers to the font installed on your server, not your local machine.

Using local fonts instead of web fonts is beneficial in some ways. Here are some benefits of using local fonts when creating a website with Elementor or Divi.

1. Fewer Choices is Better Sometimes

There are two approaches in creating a website with a page builder plugin like Elementor and Divi: spontaneously and planned. Spontaneously means you have no plan over the design you want to create. You just play around with the editor, trying here and there. Although this approach is not completely wrong, it is not recommended in the professional world.

Instead, you need to plan everything in advance. Especially if you work with a team. You can’t definitely use the first approach.

When it comes to web creation, planning includes concepting the design, creating the style guide, and so on. When everything is planned, the process ahead will be much easier. You can get rid of the unnecessary things, including fonts. You can install the fonts you only need on your project and remove the remaining. By doing so, you don’t need to see the fonts you will even never use them on your project. Also, your editor will be a bit cleaner and lighter.

2. No Need to Rely on Third-Party Service

As mentioned earlier, when you use a font from Google Fonts, the actual font file is still hosted on the Google server. Although Google is known to have solid server infrastructure (rarely down), it may can cause an issue in the future to have too many dependencies on third-party services. So, while you have your own resources, it will be much better to use them instead of relying on third-party services.

3. Reduce HTML Requests

When your website is accessed using a web browser, the web browser will make a contact with the server where your website is hosted. Your server will then responses to the web browser by replying the request made during the contact. The process is called handshake.

If the resources of your website (including font) are located in different servers, the web browser needs to make contact with different servers as well. It will increase the number of requests, which eventually make the process of website loading longer. When you use local fonts, web browsers don’t need to make contact with external servers since the fonts are hosted on your server. This can make your website a bit faster to load as the requests will be fewer.

4. Full Control Over Caching

Have you read the point number two above thoroughly?

The main benefit using your own resources is that you have a full control over them. You are free to do anything. One of which is regarding caching. If your fonts are hosted on Google or Adobe, you might see errors that the resources are missing a cache validator. This issue can only be fixed at the server level. Since you have no access to the Google or Adobe server, there is no chance for you to fix the issue.

The Downsides of Using Local Fonts

Although there are some benefits you will get, there are also some downsides you need to know before using local fonts on your Elementor or Divi websites. Especially related to compatibility with old web browsers. If you use only a newer font format (e.g., WOFF2), there is a chance the format is not support by old web browsers. In such as case, web browsers will display web safe fonts instead of your font.

To check the compatibility of a font format with web browser versions, you can go to this page.

How to Figure Out Where Your Fonts are Hosted

Before you start to use local fonts, you can first make sure whether the current fonts on your website are web fonts (Google Fonts in this case). There are two ways to check where the font files on your website are hosted. If you use Google Chrome, you can use the Developer Tools. First, visit your website in a new tab and open Developer Tools by clicking the menu icon (the three-dot icon) and select More Tools -> Developer Tools (Shortcut: Option + Command + J on Mac; Shift + CTRL + J on Windows and Linux).

Reload the page once Developer Tools opens. Click the Sources menu on the top menu and check the resources list. If you find the fonts.gstatic.com domain, this means that your fonts are hosted on the Google server. Meaning that you use web fonts on your website.

Alternative Method to Check Where the Font Files are Hosted

If you are not convinced with the above method, you can use this alternative method instead. However, this method might only work if you use Google Fonts.

First, visit this page. Paste your website URL to the available field and click the Check Website button.

Wait a moment while the tool is analyzing your website. Once done, check the result. If you see the following warning, it means that your font files are hosted on the Google server.

Conversely, if you see the following warning, it means that your font files are not hosted on the Google server.

You can check the analysis results to figure out the path of your font files. If you use local fonts, the font files can be found under the wp-content/uploads folder.

How to Use Local Fonts in Elementor and Divi

Before using local fonts, you definitely need to have the files of the fonts you want to use. There are some websites to download font files out there, including Google Fonts itself. Here are some websites to download font files:

• Google Fonts
• Adobe Fonts
• Fonts.com
• MyFonts
• Envato Elements

Using Local Fonts in Elementor

In Elementor, the custom font feature is only available on the pro version. In other words, you need to use Elementor Pro to be able to use local fonts. Once you are ready, login to your WordPress dashboard and go to Elementor -> Settings. On the Elementor settings page, go to the Advanced tab and disable the Google Fonts option. Click the Save Changes button to apply the change.

Next, go to Elementor -> Custom Fonts on your WordPress dashboard. Click the ADD NEW button to add a new custom font.

Give your font a name and click the ADD FONT VARIATION button.

Select the font file and click the UPLOAD button (make sure to select the font format according to your font file).

A little note. Some fonts might offer multiple files for different variations. If your font has multiple files, make sure to upload them all. Once done, click the Publish button.

Next, create a new page and edit it with Elementor (you can also edit an existing page or template). On the Elementor editor, add a widget that contains text element (e.g., the Heading widget). Once the widget is added, go to the Style tab on the settings panel and click the pencil icon on the Typography option. Select the font you have just added on the step above.

Using Local Fonts in Divi

To use local fonts in Divi, you also need to disable the Google Fonts first. To do so, go to Divi -> Theme Options on your WordPress dashboard. On the General tab, scroll down to the Use Google Fonts option and disable this option. Click the Save Changes button to apply the change.

Edit a page or template with Divi to open the Divi Builder editor. On the Divi Builder editor, add a module that contains text element (e.g., the Text module). On the module settings panel, go to the Design tab and open the Text block.

Click the Text Font option and click the Upload button to upload your font files.

On the appearing dialog, give your font a name and select the font files by clicking the CHOOSE FONT FILES button (make sure to select all files if your font has multiple files). Click the UPLOAD button.

Note: If you see a “Sorry, you are not allowed to upload this file type.” error message, you can fix it by adding the following line to the wp-config.php file on your WordPress site.

define('ALLOW_UNFILTERED_UPLOADS', true);

You don’t see the above error message in Elementor as Elementor has a built-in feature to enable unfiltered file uploads on your WordPress site.

You can now use the newly added font on any element that contains text in Divi.

The Bottom Line

In Elementor and Divi, you have a ton of font options as they are integrated with Google Fonts by default. Google Fonts, as you know, is the most popular free font library widely used by designers. However, if you have your own fonts for your website project, both Elementor and Divi also allow you use them. To make the font options get narrower in the editor, you can disable the Google Fonts integration before you upload your fonts.

Using your own fonts has some benefits, as we have elaborated above. Mainly because you don’t have to rely on third-party services. Not relying on third-party services meaning that you have a full control over the resources used on your website.