Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi comes packed with a number of Google Fonts to choose from for your body text and header text. You can sort through those in the Customizer Settings. But these are only a small fraction of the fonts available in the Google library.

Other options to add more Google Fonts to your website include plugins like WP Google Fonts and Easy Google Fonts. I prefer to use plugins for the heavy lifting and in this case it is easy enough to do without a plugin. I am always trying to figure out ways to reduce the number of plugins I use on my website for security and page load speed purposes.

So here is the easiest way using Google’s Font Library Tools.

 

Getting Started With Google Fonts

So let’s get started by figuring out which Google Fonts you want to use. It’s a good rule of thumb to use no more than three custom fonts on any website for design and speed purposes

1. So go to Google Fonts and select the two fonts you want to use. In this case, let’s use Varela Round and Merriweather Sans. For both fonts, you are going to select the Add To Collection button.

001

 

2. Next, you will select the Use tab in the bottom right hand corner of the page.

002

 

3. Then choose the styles you will want to use. Keep notice of the page load time monitor on the right. That way you can see how it impacts page load speed as you add more styles.

003

 

4. Now scroll down the page a bit and open the @import tab and copy that first line of code. This is the code that calls the fonts to your website.

004

 

5. Now to to your Divi ePanel Custom CSS Box (or child theme stylesheet as I prefer to use) and paste that line of code.

005

 

6. Going back to the Google Font Tool, you will find the css required to change the fonts . You can them use them accordingly in your ePanel Custom CSS box or on your child theme style sheet.

006

 

7. So let’s say, for example, you would like all your headers to be Varela Round, but your regular Paragraph text to be Merriweather Sans. You would add this to your ePanel Custom CSS box or your child theme style sheet.

h1, h2, h3, h4, h5 {font-family: 'Varela Round', sans-serif;}
p {font-family: 'Merriweather Sans', sans-serif;}

007

 

8. Now if you want to target a header font in one particular location instead of site-wide, just give the module (or section / or row)  a unique CSS Class. In this case, I will use custom-header-font.

008

 

9. Make sure you assign the text as Heading 1.

009

 

10. Then add this CSS to your Divi ePanel or your child theme style sheet.

.custom-header-font h1 {font-family: 'Varela Round', sans-serif;}

 

010

 

That’s it! There are several methods that achieve the same result, but this one is one of the easiest in my opinion. Have fun!

 


 

Well that’s all for now. I hope you find this article useful.


Well that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert Services | John 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest