Select Page

Divi Fonts Guide: Add Custom Fonts & Google Fonts

  1. Home
  2. »
  3. Divi
  4. »
  5. Divi Fonts Guide: Add Custom Fonts & Google Fonts

Mozsteps content is free. When you purchase through referral links on our site, we earn a commission. Learn More

divi fonts guide
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Choosing the right Divi fonts is a must when it comes to customizing the look of your website.

If you already designed a website before, you know that having a great combination of fonts is important but since there are millions of fonts available on the internet picking the right ones might be a hard task especially for beginners who don't that much experience in web design.

Therefore, in this post, we're going to spotlight the various ways to add custom fonts step by step as well as what to keep in mind while choosing the fonts for your Divi website.

So without wasting …. let's get into it!

Things to know

Before we go ahead, to the actionable part of this tutorial, we're going to give some answers to some of the common questions you might have in mind.

1 – What are the default Divi builder fonts?

The default font that Divi comes with when you first install it on your WordPress website is the “Open Sans” family. but you can still get hundreds of other fonts available to you within the Divi builder and theme customizer as we're going to show you later on.

Here's the preview of “Open sans” font family on Google fonts.

open sans font-family
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – Does Divi theme use Google fonts?

Yes, Google fonts are available in the Divi theme as a built-in feature, which means that now you can choose any font from the ones in the Google fonts website right in the theme customizer.

you can set it as global and it will be used in the whole site or customize it for each individual module (design block) you add to your pages which awesome!

3 – Can divi fonts be set differently on each device?

Yes, through the Divi theme customizer, you have the freedom to set fonts on mobile, tablet, and desktop but we recommend that you set them for the desktop version and they'll be used in the other devices by default to keep the design consistent as much as possible.

4 – How to choose the right fonts for Divi website?

You look for different fonts here and there and you're confused which one to choose and you keep asking yourself is did I choose the right one especially when you see some letters looking weird in your headline.

I have been there as well but don't worry we're going to give some criteria that will help you choose the right font for your site.

When trying to decide the main font of your site or a part of it keep in mind these two things:

Avoid Excessive fonts use: using a different font for each individual element will destroy the design of your website rather than making it look good because you break that kind of consistency that should be in any design.

What you can do is to choose 2 to 3 fonts and use them throughout the website, just set them in the desktop version and they'll be used in the tablet and mobile as well.

Make sure it's readable: one of the major mistakes a lot of people do when creating a website is making the fonts too small that the users can't even read them.

you need to make sure that the visitors can actually read your content comfortably otherwise, you'll make them hate your site because of the bad user experience it provides.

Talking about the size, you also have to make a difference in size between the headings (h1,h2,h3 …) as it helps you structure your content better and don't confuse the visitors of your site at the same time.

5 – What are the best Divi fonts?

There are millions of great fonts on the internet but based on the criteria we have mentioned earlier.

Here's 10 best Divi fonts out there:

Now that we have answered some of the questions about fonts and cleared the most important points when it comes to choosing the right fonts. let's move on to the actionable step-by-step guide where we show you how to integrate the fonts in the Divi theme.

6 – Where to preview Divi fonts?

Divi fonts can be previewed within the Divi builder by choosing the elements that you want to change the font for and open the drop-down containing all the 900+ fonts that come when you install Divi.

preview divi fonts
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Adding Google Fonts to Divi Theme

In the old versions of Divi you import the desired fonts manually but unfortunately after the Divi theme has been updated they made it very easy for users who have Divi theme installed on their website to embed Google fonts directly from the theme options or the theme cutomizer.

For those who still didn't update to the latest version of Divi or don't want to for some reasons or in case you're using Divi page builder along with another theme don't worry we have got you covered (:

1 – How to enable Google fonts in Divi Theme?

If you have the latest version of the Divi Theme, the Google fonts are already included and what we need to do is to just enable it. How?

follow these steps:

1 – log in to your WordPress Admin dashboard, then hover over the “Divi” tab at the bottom of the left-hand navigation menu and click on “theme options” as you can see below.

Divi theme options
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – You'll taken to the Divi theme options Go to “General” tab and scroll down to see the rest of the settings.

Divi theme options panel
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Look for “Use Google Fonts” option and turn it on as seen below.

Divi Google fonts
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

That's it! you have now enabled Google fonts your Divi website and you'll find them in:

The theme builder: where you can create custom layout for header, footer, category pages, tag pages, search pages and product pages if you're building a store.

Theme customizer: where you can set change the default Divi theme and the global things as we're going to show you in the rest of this article.

2 – How to manually add Google fonts to Divi Theme?

If for some reason you're using an old version of the Divi theme, you still can add the google fonts manually to your website. How?

simply by following these steps:

1 – Go to the Google fonts website and search for the font you want or scroll until you find the one that you like. for the purpose of this tutorial, we're going to add “Roboto” font and the same process applies to any other font you select.

divi fonts
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – Select the styles of the font you'll only need in your design (thin, light, regular, medium, bold, …) to avoid slowing down your website.

divi fonts
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

3 – after selecting the desired Divi Google fonts, click on the widget that's on the top right corner as you see below.

divi fonts
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

4 – Now, from the integration options available, select the “Link” and copy the lines of code that appear in the box underneath. And if you want to remove some styles you have chosen by mistake you can do that easily by clicking the minus icon next to the name.

divi google fonts
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

5 – Go to the WordPress dashboard > Divi > Theme options

Divi theme options
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

6 – In the Divi panel select “Integration” tab.

  • Turn on the “Enable header code”
  • Paste the lines of code so that it appears in the <head> of your blog
divi theme integrations
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

6 – That's it! you have manually imported the font to your site and you can assign it to any element using CSS stylesheet code and here's an example of applying it to the heading tags.

H1, H2, H3, H4, H5, H6
{
   font-family: 'Roboto', sans-serif;
}

Adding Other Custom Fonts to Divi Theme

Now that we have seen ways to integrate Google fonts to Divi websites. what if you want to use premium fonts instead?

that's what we are going to clear in the upcoming lines …

First things first, let's see some places where we can find great premium fonts.

1 – Best websites to find premium fonts for Divi

Here is a list of the best websites to find premium fonts:

Envato Elements: one of my favorite websites to find premium fonts, as well as all the assets I use in my design, is the Envato elements which is a market with tons and tons of fonts and other cool stuff, and the great about this is you get unlimited resources for a membership fee.

Envato Elements Fonts
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Fonts.com: this website is completely dedicated to fonts so you'll dozens of amazing fonts to use on your Divi website. the fonts are divided into types so you'll find any type of fonts you can possibly imagine.

FontSpring: another website providing a collection of premium fonts ready to use for your designs and websites.

2 – How to add custom fonts to Divi?

After downloading the file of the font you want to add from one of the websites mentioned above or any other site. let me show you how to add it to your Divi theme step by step.

1 – First go to the theme builder or open the visual builder and choose any module you want. for the sake of this tutorial I opened the visual builder and added a blurb to the page. under “Design” tab click on the element you want to change the font for.

In our case we're going to change it for the blurb title.

Divi blurb settings
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – click “Upload” and navigate to the folder where you have the custom font file you downloaded.

upload fonts to divi
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

3 – Right click on the zipped file and from the menu select “Extract files” or “Extract Here”

extract envato elements font files
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

4 – After the file extracting process is completed, you'll get the font files. select them all and hit “Enter” in your keyboard

divi supported font formats
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

5 – Now click “Upload”

divi custom fonts
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

6 – And Boom! the custom fonts are now added and been applied to the blurb title as seen below.

change font on divi builder
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

That's it! you can use it on any of the other pages if you want to.

If you encounter an issue saying the file you have uploaded is not permitted for security reasons then kindly add the line of code underneath this note in your wp-config.php file then try over again.

Changing the Divi global fonts

We have learned how to add google fonts and custom fonts so far, but what if you want to globally change the fonts of your Divi theme?

Here's The step by step process for changing the Divi theme global fonts:

1 – Login in to your WordPress dashboard then head to Divi > Theme customizer

divi theme customizer
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – Next, click on “General Settings”

divi general settings
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

3 – Then choose “Typography”

divi typography
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

4 – Now you see all the different settings of the fonts you can play around with to come up with something that suits your needs.

divi global font
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

5 – When you finish on the top right corner, click on “Publish” to save the changes you just did.

divi save changes
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Congratulations! you have set the default Divi typography.

Keep in mind, global fonts are applied to your whole website but if you set different fonts for a module from the design tab then those settings will override the global ones.

Further Reading:

Roundup

Divi fonts play an essential part when it comes to customizing your website design and make it look unique. Divi Team has done a good job in making every setting available for the users and even make it easy to change to a great extent.

Here we are in the last line of this article, I hope you've got some good information, feel free to drop a comment below and let me know your thoughts.

Cheers!

0 Comments
Submit a Comment

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

Start a blog at 2.75$/mo

Categories

Pin It on Pinterest

Share This