Add custom fonts in Divi

by | Divi Tuts, How To's | 0 comments

Looking for a straightforward tutorial for adding custom fonts in Divi and being able to use multiple fonts on one line? There are a ton out there but not so comprehensive, some work on specific devices only or specific browsers after much trial and error, and lots of inline CSS this is what I do.

So, what is Divi? If you aren’t familiar with Divi it is a paid theme and page builder that you can download and use to create any type of WordPress website. I have been a HUGE fan of Elegant Themes since their launch many moons ago and have watched their products go from multiple WordPress Themes to this amazing tool I and many website designers and developers use to create unique and custom websites.

Step One: How to add custom fonts in Divi

Make sure you have two file versions of your custom font to upload. Natively, Divi supports .OTF (open type) and .TTF (true type) font file types and I recommend that you upload both as some browsers and devices use one or the other. Now, if you need to upload other file font types, I’ll create a future post for that. If you only have one version of your font file, there are converters available that can export your font file in different file types, the one I use the most is https://convertio.co/ttf-otf/.

Upload your custom fonts within the design settings of the Divi text module. The text module looks like this below. Click on the settings “cog” on the black text module.

Image of divi text module

The design setting box will open. Click on the “Design” tab and then click on “Default” under “Heading Font”

divi design settings box

Once you have clicked on the “Default” dropdown you should see the button to “Upload” Custom fonts.

Divi upload font button

Enter the name of the font, drag or click the “Choose Font Files” button and locate your font files. Notice the Supported File Formats: ttf and otf. Click on the blue “Upload” button at the bottom and you are done!

Choose font files

Step Two: How to use your custom font on 1 word in your Divi text module 

Open the page on the front end of the builder by clicking the button “Build On The Front End”

You will now be in Visual Builder mode. Instead of editing the text module, you are going to double-click on the word you want to change the font on. Once highlighted, Click on the “Aa” and select your custom font. Click anywhere on the page to deselect and save. Test on all browsers and mobile devices and you should be good to go! You can add changes such as the size of the font within the text editor (content editor) of the text module by adding some code.

Let me know if you have any questions or comments below that I can help with. Also, this post has affiliate links in it that enable me to receive a small commission from the company. I have been using Elegant Themes for many years and would not be recommending them if I didn’t believe in and use the product.

xoxo

 

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Pin It on Pinterest