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.

  • Google+
  • Facebook
  • Twitter

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.

  • Google+
  • Facebook
  • Twitter

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.

  • Google+
  • Facebook
  • Twitter

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!

Previous post
Next post

5 Comments

  1. steveharris411

    Great post Lisa-Robyn. Perhaps and idea for a future post is how to remove references to unused external fonts and remove older font formats like EOT, TTF, and OTF. Particularly in DIVI. Slows all my site speeds and performance scores. Thanks for the great info!

    Reply
  2. Randy Martin

    All this wonderful description and action steps and then there is this undefined statement, “Remember to change the font-family declaration to mirror your chosen font.”

    That sounds terribly important but is totally meaningless to me.

    I guess I’ll have to try the plugins.

    Reply
  3. MartinB

    Thanks for this, but I got a bit confused where you said> “If you’re not using Divi by Elegant Themes, you’ll need to do a bit more code work to embed your fonts.”

    I AM using Divi (and after all the post title is how to add Google fonts to your Divi website). So I’m guessing what immediately follows describes what needs to be done if I’m NOT using Divi. But I’m not clear where that part ends and if I need to edit my functions.php.

    Perhaps you could make it explicit what DIVI users need to do and either remove the ref to non-DIVI code work or place it in a toggle panel.

    Reply
  4. Pablo Alvestegui

    Hello Randy, what it means is that if you copy the code published in this post, where it says:

    font-family: ‘Work Sans’, sans-serif;

    You need to remember to change ‘Work Sans’ to the font you chose for your project. It’s just a reminder for some users who copy the code snippet and forget to personalize.

    Reply
  5. Pablo Alvestegui

    Hello Martin,
    We have edited the post as per your suggestions.
    The part between

    How To Add Google Fonts to Your WordPress Website

    and

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

    is intended for non-divi users.

    Reply

Submit a Comment

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