How to Add Custom Fonts to Your Divi Website?

Team DiviFlash

Updated: August 28, 2023
Table of Contents

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.

Team DiviFlash

At DiviFlash, we are more than just a team – we are a collective of Dev Experts, Word Artists, Design Virtuosos, and Marketing Maestros, all united by our profound expertise in Divi and WordPress. Our mission is to provide you with accurate, insightful, and in-depth content aimed at enriching your understanding of Divi, WordPress, and the art of web design.

2 Comments

  1. Marc

    Hi,

    Great article, very useful!! Definitely better to use woff2, weird it is not available out of the box in Divi!

    Can I remove this snippet once the font has been uploaded? Or will the font stop working in Divi if I do so?

    Thanks for sharing!

    Reply
    • Team DiviFlash

      Hi Marc,
      Sorry for being late and Thanks for your comment.

      Yes you can remove the snippet and your already uploaded font will work fine but you can’t upload a new one.
      Plus if you are using any security plugin that might show your woff2 file as a corrupted file and will suggest you delete this.

      All in all, it’s wise to keep it.
      I hope this information helps.

      Cheers.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

📢 Discover our latest improvement & fixes in DiviFlash 1.4.5

📢 Discover our latest improvement & fixes in DiviFlash 1.4.5