How to easily add Google Fonts to your Divi website

Importing Google Fonts into Divi is incredibly easy. I’ll show you how to do it in 5 easy steps.

howtoaddfonts-min

1. Find the font you want to use at google.com/fonts, then click the blue Add to Collection button.

2. Click the Use button on the bottom right of your screen.

3. Now, you’ll be on a page with several steps. For Step 1, choose the styles you want to use.

4. Scroll to Step 3 and click the tab that says @import. Copy that code and add it to your CSS. My favorite way to add CSS is to use a lightweight, easy plugin called  Simple Custom CSS. (Don’t know how to add CSS? Don’t be scared – I’ll hold your virtual hand through this tutorial.)

5. Back on Google Fonts, Scroll to Step 4. Copy that CSS and add it to your CSS for whatever element you’d like. You may need to add an !important in order to override some of Divi’s stubborn settings. For instance,

h1 {
    font-family: 'Your Font Name', serif !important;
}

Optional: Sometimes, Divi/WordPress will alter the weight of your text, as well. In this case, it’s good to define the weight like so:

h1 {
    font-family: 'Your Font Name', serif !important;
    font-weight: 400 !important;
}

Then, update your page, and see your beautiful work in action.

pugfinished

Hello there, Divi designer!

Designing can be tough, but you can make it easier. Receive four free emails on eliminating stress, using Divi's magical powers to work smarter, raising your rates, and automating the administrative dullness in your practice so you can focus on doing what you love.

Sign Up