How to Add Custom Fonts to Your Divi Website?

Are you looking for a way to add custom fonts to your Divi website? Adding custom fonts seems a complex endeavor for those who have never done it. No worries! You need to follow a simple process.

Today’s post will help with the easiest way of using custom fonts. We’ll also explain if there are any issues while uploading it.

Let’s get started.

How to Add Custom Fonts

First, create a new page or switch to an existing page. Here, add a Text module and locate the Design Tab. Then, click on any options like Text, Heading Text, Body Copy, etc. You will see the “Upload” option from the dropdown list of font selections.

An “Upload Font” window will appear after clicking the “Upload” option. You can now name and upload the font file. Here we have added the Gilroy font, which is also used across our website.

As you pick your fonts, notice that Divi’s supported file formats are only TTF and OTF. But don’t worry; there are free converter tools if you have a different file type.

In addition, we suggest you always check the supported font weights option. So, you can use fonts of any weight.

Lastly, click the Upload button beneath the popup. Your chosen custom font has been successfully added to the dropdown list of all font options. So the next time you start editing or adding text to your Divi website, you’ll see this font.

Moreover, there are plugins like Use Any Font, Advanced Editor Tools, Font Awesome, etc. Upon activation, you can add custom fonts with these plugins. That said, we believe uploading custom fonts through Divi’s Design Tab is the easiest way. 

Now let’s explore all the possible issues you may face while adding a custom font to Divi.

Solving Problems During Adding Custom Font to Divi

By default, Divi and WordPress don’t support some files. Below, you’ll learn to use the unsupported file types on Divi.

Adding WOFF/WOFF2 Custom Fonts to Divi

As we mentioned, Divi only supports TTF and OTF font files, and there are tools to convert other types of fonts to TTF or OTF. You can also allow WOFF/WOFF2 font files through the WordPress dashboard. 

For this, navigate to Appearance > Theme File Editor.

Click on  function.php in the right sidebar. Then copy and paste the below code and finally check the Update Button at the bottom.

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');
}

You can now upload a WOFF or WOFF2 font file as described in the above method. As you can see, WOFF/WOFF2 files are now supported in the picture below. In our case, we have added a WOFF font type called Firsta.

Adding SVG Fonts to Divi

You may want to use an SVG font file. But, WordPress doesn’t support this format. Where there is the need for a third-party plugin or extra coding. Read this article that explains how to use SVG files in WordPress.

Your Turn

In this post, we shared the easiest way to add custom fonts. Hopefully, now you know how to add custom fonts to Divi. Although we have given solutions to multiple problems, you can share with us any questions in the comment box.