Note: Divi now has Google Fonts built in! You can choose from Google Fonts in your Theme Customizer:

Or you can select your desired Google Font in each module’s “Design” settings on a case-by-case basis, if the font is not for global use.

If you’re using the latest version of Divi but still can’t see your desired Google Font in the font list, your site may not have Google Fonts enabled.

To enable Google Fonts:

Navigate to “Divi>Theme Options”,

divi theme options

then in the “General” tab,

Divi theme options general settings tab

make sure you have Google Fonts enabled,

Use Google Fonts option enabled in Divi Theme Options

then save changes.

save theme option changes

 

To preview Google Fonts:

Now if you’re seeing the big long list of fonts and feeling at a loss. Perhaps a preview of Google Fonts is what you need.

 

However, read on if you’re still using an older version of Divi and need to manually add a Google Font to your Divi website…

Step 1:

Browse and select your font from Google Fonts.

Refine your search by using the controls in the sidebar.

refine font search

 

You can type custom text directly into the font preview are to test. Click on the “APPLY TO ALL FONTS” option to see your custom text in all of the font previews.

custom text

 

Use the controls within font display area to preview variations. Once you’ve decided on a font, select it by clicking the “+” icon.

 

Step 2:

Click on the black bar at the bottom of the screen to open and view your font selection.

 

Click on the “CUSTOMIZE” tab to adjust your required selection.

 

Click on the “EMBED” tab and copy the embed code provided.

 

Step 3:

Log in to your WP Admin panel.

yourdomainname/admin

 

Step 4:

Navigate to Divi>Theme Options.

divi theme options

 

Step 5:

Select the “Integration” tab.

 

Paste the embed code into the field that will add it to the <head> section, and click “Save Changes”.

 

Step 6:

Now you can assign your font styles in your stylesheet using this added font. E.g.


h1, h2, h3, h4 {
font-family: 'Fira Sans', sans-serif;
}

 

Where to paste the CSS snippet

Copy and paste the above snippet into one of the following two places (depending on where the rest of your custom CSS code is residing):

1) Navigate to Divi>Theme Options and at the bottom of the default “General” tab, paste the CSS snippet into the “Custom CSS” box and save changes.

divi theme options

2) If you are using a child theme, navigate to Appearance>Editor and paste the CSS snippet into your child theme’s stylesheet.

navigate to wordpress theme editor

Child Themes

We recommend using a child theme. It is your insurance against losing your custom work in updates. Click here for instructions on adding a basic Divi child theme with a stylesheet (for custom CSS). Click here to learn more about child themes and getting the most out of the Divi theme.

 

Or perhaps you’re looking for:

How to Globally Change the Website Font in Divi (Basic – from buit-in Divi settings)

Want more module options for your Divi website?

Check out our Custom Modules for Divi
Browse Custom Modules