How to Add Fonts in Divi

By Divi Dude

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?

Must Have Plugins

WP Theme FAQs

WP Rocket - WordPress Caching Plugin

Duplicator Pro: WordPress Backups Made Simple




Favorite WordPress Theme

Divi WordPress Theme

Start Your Newsletter

MailerLite Email Marketing for Small Business

 

Constant ContactConstant Contact

Legal Disclaimer

Affiliate marketer: Which means when you click a link and purchase an item, I may receive a commission.  Thank you for your support.

Latest Divi Dude Tutorials

More From Divi Dude

Delete Spam Comments in Bulk Without Plugin on Cloudways

Delete Spam Comments in Bulk Without Plugin on Cloudways

Sometimes you screw up and forget to turn off comments on your WordPress website, or forget to configure your Askimet, or do both, and then you end up with thousands of comments that are nothing but spam. We’re talking hundreds of pages worth of comments that need to…

Code Snippet Syntax Highlighter that Works with Divi – Review

Code Snippet Syntax Highlighter that Works with Divi – Review

This is one of those plugins that’s only going to appeal to a certain number of people. People like me who have a need to add syntax code to websites. But if you’re one of those people, then I recommend you get the plugin — Divi Code Snippet Module — from the creator of Divi Booster. I tried 3 or 4 plugins in WordPress, every one of them …

3 Easy Ways to Add Pinterest Board Pins to Divi Websites Without Plugins

3 Easy Ways to Add Pinterest Board Pins to Divi Websites Without Plugins

Here’s the dilemma. When I build websites, I build them primarily for a landscape screen. Most of my photos are optimized for landscape screens. My Facebook and Twitter graphics are for landscape screens. But Pinterest prefers portrait style graphics for its pin boards. See the problem? My website has graphics that are wider than they are long (landscape). Yet, Pinterest wants graphics that are taller than they are wide (portrait).

Join Our Awesome List

Join our mailing list to receive the latest news and updates from Divi Dude. We don't write often, but when we do, everything will more or less be spelled correctly (oh, and be interesting and fun and knowledge based).

Thanks Dude! You've successfully subscribed.

Pin It on Pinterest

Share This