How To Add Google Web Fonts To WordPress Divi Theme

Hello! If you want your website to stand out from the others, then using custom fonts like Google Fonts will get you there. Follow the steps below to add Google Fonts to your website and how to style it using CSS.

Step 1: Hop on to Google Fonts

• Browse through the library and select the one you like best by clicking on the plus (+) sign.
  *If you’re stuck and don’t know which font to choose, click here for the top 5 modern Google Font pairs for WordPress.

• A pop-up will appear on the bottom right corner and will display how to embed the font of your choice to the header of your website and how to specify it in CSS.

• Here you will see the instructions on how you can add the font to your website and 2 different ways to embed the code by Standard or @Import. I will be showing you how to add this through the Standard way.

Step 2: Adding your Google Font to WordPress

• Copy the code under the Standard tab.

• Head on over to your WordPress dashboard.

• Click on the Divi tab > Divi Theme Options.

• Click on the Integration tab.

• Paste your Google Font code under “Add code to the < head > of your blog.”

• Scroll down and click “Save Changes.”

Step 3: Refer to the font in a CSS style

• Go back to your selected font in Google Fonts and copy the code under “Specify in CSS.”

• Under Divi Theme Options, click on the “General” tab and scroll down until you see the “Custom CSS” box.

• Paste your code there and make sure to refer to the font in a CSS style.

• For example, if you want to use the font for Heading 1 only, then your CSS will look something like this:
  

  H1 {
  font-family: ‘Roboto’, sans-serif;
  font-size: 48px;
  color: #000000;
  font-weight: 400;
  }

• Click here to learn more about styling your selected font!