How to Add Custom Fonts to Your Divi Website – Step by Step

Do you know your typography will influence the overall aesthetic of your website? Your typography has a considerable impact on expressing your business and brand tone. Typography plays a significant role in achieving a unique design for your website, mainly if you use custom fonts.

You can add custom fonts to your WordPress website relatively easily. There are a couple of methods to add your preferred font to your WordPress website. You can directly upload your custom fonts to your page builder if it supports them. Or you can upload those fonts to your server and use the CSS property to call the fonts in your WordPress website.

I am using the Divi theme for the WordPress website in this blog post. That means this specific blog will use the Divi theme as an example, so the exact steps for your active theme will be different.

What Is a Custom Font?

I will quickly explain what a custom font is in this context? A custom font is the same type of font you may recognize from Google fonts or other similar services.

Let me call the custom font your own font. It can be a font you have designed, a font you have purchased from a font selling website, or even a font downloaded from the Google font site.

Divi theme includes a lot of Google fonts. So, you only need to select your preferred font from the available font list.

But I recommend you to use a custom font instead of using Google font directly. I always encourage you not to use Google fonts the way you might be using them right now.

So in the next section, I will tell you briefly why Google fonts are not a good choice for the performance of your WordPress website.

Why Shouldn’t You Use Google Fonts?

Google fonts offer thousands of beautiful fonts for free. It is easy to implement by copy-pasting a few lines of code. It also allows you to download those fonts to your local computer to use without relying on the Google fonts network.

Using Google fonts directly, you risk your website’s performance. I meant fetching the fonts file from the Google fonts website when I said directly.

Instead of calling the fonts file and related CSS files from the Google fonts website, you can host the CSS file and fonts file on your WordPress website server. This will let you stop relying on the Google fonts website. And that will directly impact the page speed of your website.

Imagine you are using Google fonts directly on your WordPress website. And when someone visits your website, their browser will need to contact Google fonts webserver to download the necessary fonts files and CSS files. The browser must reach more than one external Google-owned domain to receive all of the required files from the Google network.

The more you stop relying on an external network, the better and faster your website will be; for human visitors and page speed scoring tools. And recently, there have been so many concerns about using services like Google fonts under GDPR (General Data Protection Regulation). So better you stop using Google fonts now.

Once again, I am not against Google fonts. I encourage you to use your preferred fonts by serving locally and not rely on any 3rd party website. It is not just the font files; you should not rely on 3rd party services to host static files like JavaScript, CSS, and multimedia content like images.

If you stop using such 3rd party services, I can guarantee you that your page speed score will improve significantly. I will show you how to upload and use your preferred fonts in your Divi theme in the next section.

Downloading Custom Fonts for Your Website

In the context of this blog post, a custom font is a font you saved locally on your computer. Earlier I told you you could even download fonts from Google and many other websites.

First, we need to download those font files to your computer to upload your custom font. So we will now download your preferred fonts from the Google fonts website.

For that, you will need to visit the Google fonts website. You will need to search for your font on this website and click on it. I will use Rubik for this tutorial. This is the font that we are using on our website.

Once you click on the font’s name, you will see the specimen page of the particular font. On that page, you can see so many details of the font. Click on the Download family button on this page, and then your browser will download those fonts to your computer.

Once you have extracted the downloaded zip file, you can see all font variations. Remember, we have downloaded the whole family of the font, and you may only need just one or 2 of them.

Most of the designers of the fonts design their fonts to serve all the locales and needs. This will usually make the font file very heavy. So we need to make your font file slim by removing those unused glyphs which you will never require.

I have written a step-by-step guide to help you reduce your font file a lot. You will need to understand that every step you take to fine-tune your WordPress website will help you and your visitors achieve a super-fast-loading website.

This is your website, and you are responsible for the success of your website. And my job is here to help you make your task simple, even if you are not tech-savvy.

Uploading Custom Fonts to Your Divi Website

I assume that you have now generated your web font file and reduced its total size by following my step-by-step guide. I also believe that you have downloaded WOFF2, the modern font format.

This font format is much smaller than the traditional font format, and all of the modern web browsers will support this format. So there is no reason you have not to use this font format. Additionally, this will help you to improve the overall page loading experience.

So now we will upload this font file to your Divi theme.

For that, log in to your WordPress website and edit any page or post you made with Divi. In this example, I will use a premade layout from Divi.

I will hover over this heading that says “The Future of Divi.” And I will click on the Module Settings icon.

Now, the Text Setting popup will appear. Here, click on the Design tab, and expand the Heading Text. The changes we are making will be available globally to use any text module in your Divi site.

Now click on the drop-down under the Heading Font.

Now you can see a list of available fonts, the currently chosen font, and an Upload button.

Click on the Upload button.

You will then see the Upload Font popup window.

In this popup window, we see a problem; it says Supported File Formats: ttf, otf. If you ignore this and try to upload, you will see the error message as well.

That means we cannot upload modern font formats like WOFF or WOFF2. A little while ago, Divi stopped allowing us to upload WOFF/WOFF2, and the reason they are saying it is based on security considerations. I am unsure about whether a font file will pose a security threat. We are going to ignore this temporarily.

Allowing WOFF/WOFF2 Custom Fonts in the Divi Builder

The workaround will allow us to upload modern font formats like WOFF and WOFF2 directly to the Divi builder. So for that, we need to go back to our WordPress admin dashboard. Now click on Appearance > Theme File Editor.

On the next screen, click on the functions.php from the right side. Now scroll down to the end of the PHP file and then copy-paste the below code into the file. And then click on the Update File button.

add_filter('upload_mimes', 'custom_mime_types', 999999);

function custom_mime_types($mimes) {
  $mimes['otf'] = 'application/x-font-opentype';
  $mimes['woff'] = 'application/font-woff';
  $mimes['woff2'] = 'application/font-woff2';
  return $mimes;
}

add_filter('et_pb_supported_font_formats', 'custom_font_formats', 1);

function custom_font_formats() { 
return array('otf', 'woff', 'woff2');
}

Do not worry; it will be easy. Just look at the below screenshot and follow my instructions.

Once you’ve saved it, let’s go back to the upload font window. You might need to reload the page to see the changes we just made. You can now see the info text updated like Supported File Formats: otf, woff, woff2.

Now input the Font Name with a proper name that you will remember later. For this example, I will add Rubik Medium Custom, so when I look at it later, I understand that this is a Rubik font, and the weight is Medium. The Custom in the name will help me identify the original Rubik font and the font that I have uploaded.

Now upload or drag and drop the font file and click on the Upload button.

Once the upload finishes, you can see your new font applied to your heading.

Great work. Please go back to the WordPress admin dashboard and remove the custom code from the functions.php file. We don’t require that workaround unless you wish to upload fonts again.

Summary

There are hundreds of beautiful fonts already available within the Divi theme builder. But sometimes, you will need to use a custom font to make your website stand out from the rest of the crowd. And you might need to upload a custom font that is as slim as possible to reduce the overall loading time. This will make your website visitors feel good by having a fast-loading WordPress website.

Knowing how to add a custom font to the builder may confuse you if you get started with the Divi builder. You might find some plugins to help you achieve the same result, but I prefer fewer plugins on my WordPress website. Because the fewer plugins I use, the better and faster my WordPress admin dashboard will be.

If you like this step-by-step guide, you will enjoy our service and cloud-based robust infrastructure that is fine-tuned for WordPress hosting. So I invite you to try Rovity, the best and fastest WordPress hosting in India, at a relatively low price.