How To Add Google Fonts To Your WordPress and Divi Website

How To Add Google Fonts To Your WordPress and Divi Website
Typography plays an incredibly important role in web design. Not only does type selection have an effect on the overall aesthetic of a website, but it also aids in adding richness to a brand while communicating its identity.

There are thousands and thousands of fonts, and while most of these fonts are only available via the purchase of a license, Google has been releasing a series of free, already-licensed and web-safe fonts for web developers and designers to use in their projects.

Based on the sheer number of possible combinations, choosing which fonts to use in a web project might be a bit of a challenge, but once you’ve made your decision, adding them to your WordPress website is a breeze.

If you’re using the Divi theme by Elegant Themes, you’ll know that there are a number of Google fonts already available within their theme packaging, but if you’re looking for something a little more unique, follow the quick tutorial below to add your own selection of Google fonts to your WordPress and Divi websites.

Note: For this tutorial, you’ll need a child theme. We recommend reading our blog post, Everything You Need to Know About Using A Child Theme with WordPress and Divi, for a detailed explanation as to why using a child theme is important and a step by step guide explaining how to set one up.

How To Add Google Fonts to Your WordPress and Divi Website

First, head over to Google Fonts and browse through the library of available fonts. Use the controls on the right-hand side of the console to refine your search, and once a number of fonts are returned, use the individual font controls to view variations of display text (sentence, paragraph, numerals etc.), weight and size.
Once you’ve made your selection, click on the red and white plus sign to add the font to your collection. To add more fonts, return to the browsing console and again, click the plus sign to grow your collection.

While not set in stone, there is a general rule that a website should not include more than three fonts. This helps to retain a unified look and feel across a website.

Next, view the font/s selected by clicking on the sticky black bar at the bottom of the browser window. Click on the Customize tab to view and select the desired font weight variations.
Once you’ve selected the weights and variations, click the Embed tab. Select and copy the code (within the LINK tags) presented within the Standard tab, i.e.:
Alongside the Standard tab, you’ll notice another tab named @import.
Both the LINK and @import rules are merely two alternate methods for including stylesheets within a web page. The LINK method is preferred over the @import rule as it is better at performance.

Once you’ve copied the code within the LINK tags, head over to your WordPress website.

How To Add Google Fonts to Your Divi Website
If you’re using Divi by Elegant Themes, navigate to Divi > Theme Options > Integration, and paste the code into the ‘Add code to the < head > of your blog’ text area.
Once complete, scroll all the way to the bottom and click ‘Save Changes’. At this point, you’re free to assign your font styles in the style.css file in your child sheet.
 h1, h2, h3, h4 {
    font-family: 'Work Sans', sans-serif;
}

How To Add Google Fonts to Your WordPress Website
First, open up a text editor or IDE (such as Sublime or Brackets) and paste the following code:
function load_fonts() {
   wp_register_style('googleFonts','https://fonts.googleapis.com/css?family=Font+Name:weight,weight');
   wp_enqueue_style('googleFonts');
     }

add_action('wp_enqueue_scripts', 'load_fonts');
Return to the Google Fonts console and copy all of the text within the href=“ ” section. Paste this into the second parameter of the wp_register_style function, between the inverted commas.
function load_fonts() {
   wp_register_style('googleFonts', 'https://fonts.googleapis.com/css?family=Work+Sans:400,700');
   wp_enqueue_style('googleFonts');
     }

add_action('wp_enqueue_scripts', 'load_fonts');
Next, you’ll need to add this code to the functions.php file within your child theme.

If you’re working locally, the child theme folder will be located within your computer files. If you’re working on a live site, either access the functions.php file by using an FTP client (such as FileZilla or Cyberduck), or edit the file from within your server console or from within the Appearance > Editor console on your WordPress dashboard.

Whichever method you choose, make sure you save your changes.

Now that your site is registering the Google Font, we still need to integrate it within the style sheet.

In the Google Fonts console, they offer the CSS rule which can be used to declare to the font code, example:

font-family: 'Work Sans', sans-serif;
This code is incomplete, and will need to be structured with the correct syntax in order to work correctly. The example code below can be copied and pasted into the style.css file within your child theme folder. Remember to change the font-family declaration to mirror your chosen font.
 h1 {
    font-family: 'Work Sans', sans-serif;
    font-weight:700;
    font-size: 28px;
    color: #333;
}

p {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #333;
}
If you’d like more information regarding fonts and playing around font properties, have a read through of the W3 Schools document on font properties.
Also, if you don’t like manipulating code and would prefer to use a plugin, have a look at either Easy Google Fonts or WP Google Fonts.
We hope that this tutorial has helped you include additional Google Fonts within your web builds.

If you have any further queries or questions, please feel free to leave a comment below. We love receiving your feedback!
Thanks for reading!

Lisa-Robyn Keown

Lisa-Robyn is a qualified copywriter and brand strategist from Cape Town, South Africa.