How to Add Fonts in Divi

Adding fronts to Divi is really easy with the new drag and drop feature.  (please note, this feature became available in version 3.12 or later of Divi).  You can also add fonts by choosing Upload when selecting the font from the design tab. I did a really short video on the subject which can be found on YouTube, or by watching below.  I’ll go over the steps in the copy below the video if you’d rather read.

Finding Fonts to Use with Divi

Before you add any fonts to your website, I guess you should find some fonts you want to use.  With Divi from Elegant Themes you can use True Type (.ttf), Open Type (.otf), or Embedded Open Type (.eot), or Web Open Font Format (.woff / .woff2) fonts.  Check with your fonts licenses before uploading to your website to make sure you can upload it legally.

In the video, the example font I use is Boycott, which I found on 1001 Free Fonts website.  It is free to use, so I thought it would be a good font to use as a sample.

Upload Your Font Via Divi’s Design Tab

One method for adding a new font to your Divi website is via the Design tab found within your module.  Just click on the tab, choose any one of the expandable fields that has fonts (i.e. text, heading, body copy) and in the font selection drop down, you’ll see a button that allows you to upload a font. Press the button, then navigate to where the font you want to upload is and upload it.  Now, you’ll see the font has been added. Simply choose the font when you want to use it. It’s really easy. But there’s an even easier way…

Add Your Font with Divi’s New Drag and Drop Method

… and the easier way is to just drag and drop it into the Visual Builder.  Open up the Visual Builder and go to your computer and find the font you want to use with File Explorer and select it with your mouse and while holding down the button drag it over the screen with the Visual Builder open and the screen will change color with a message about Dragging and Dropping.  (see picture).  Now simply let go of the mouse button and Divi will automatically install the font for you. Now when you go to choose a font for header or body copy or where ever you choose fonts, you will find the font you added will be there.  Pretty cool and easy, eh?