Adding Google Fonts to Divi

The Divi Theme comes with a range of approximately 50 built-in fonts. But if you're looking to add more fonts, or have a specific Google Font you want to use, you may like to use one of the following two options to integrate Google Fonts with your Divi site.

Using the Divi Extended Google Fonts plugin

Probably the easiest way to add Google fonts to Divi is with the Divi Extended Google Fonts plugin by TortoiseIT. Once installed, it adds the 800+ Google fonts, making them easily available from anywhere you can currently select a font within Divi.

Using the Easy Google Fonts plugin

Another option is to use the free Easy Google Fonts plugin. It is designed to add Google Fonts to any WordPress site. However, there is some customization needed to get it to work with Divi.

When first installed, it will add a section into the customizer (Divi > Theme Customizer > Typography > Default Typography) which adds options for setting the font on paragraphs and headings. These options allow you to choose from any of the Google Fonts. This will allow you control the font in many cases.

However, there are some parts of Divi which can't be controlled by these options. I haven't been through and figured out exactly what these area are, but I'll describe one and what to do about it. If you find others, please let me know. One bit of text which can't be controlled by the default Easy Google Fonts options is the font used for bullet lists in text modules. By default these will use the built-in Divi font which may differ from the Google Font you have chosen for paragraphs.

To solve this, go to "Settings > Google Fonts" from your WordPress dashboard. Here you'll have the option to "Create a new font control". Go ahead and create a new font control and call it "Bullet List Items". Then in the CSS selectors option type ".et_pb_text li" (without the quotes) and hit tab. Finally press "Save Font Control". If you now go back into the customizer you'll find (under a different section: "Divi > Theme Customizer > Typography > Theme Customizer") an option for setting the font on "Bullet List Items". Go ahead and select the font you want for the bullet items, and click the customizer's "Save & Publish" button. Your choice of font should now apply to bullet list items in text modules.

The same general principle will apply for adding a font control option for text anywhere else in the theme. You just need to know the CSS selector that references the text you want to control. If you don't know how to find this, send me a link to your page and tell me what text you want to control and I'll do my best to let you know which selector you need.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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