Google Fonts is a powerful tool that allows us to use a wide range of well crafted, nice fonts in our web projects. In this tutorial we will see how to add and use them in our WordPress theme, adding them the right way. In fact, we have to work in our functions.php file and add our fonts like they’re an asset to enqueue, precisely how we do with our external CSS and Javascript files. Let’s see in detail what I’m talking about.

Choosing our fonts

First, we obviously have to choose the Google Fonts we want to use in our WordPress theme. So let’s go here and select all the fonts we want to use – let’s say, for example, we choose Roboto and Nunito Sans, two fonts I personally love (I’m using the latter for this website so it’s a big deal for me). We choose them and see a little window opening up in the bottom-right corner of our web page, with all the useful informations we need, and all the options to customize the styles.

Just below the Standard label we will see a code with a <link> tag: we will need the content of the href attribute.

Ok: once we have the informations we need, we can move on to the next step.

How to add Google Fonts in our WordPress theme

Let’s open the functions.php file of our theme and create a new function, in which we load our Google Fonts. We could also use the function you (presumably) already use to load your CSS and Javascript files, but we will create a new one for the sake of clarity.

function load_google_fonts(){
    wp_enqueue_style( 'google_fonts', 'https://fonts.googleapis.com/css?family=Nunito+Sans:400,700|Roboto:400,700&display=swap' );
}

As you can see, it’s a function with only one line of code, the one that will enqueue our new style, the Google Fonts. We just pasted the content of the previously seen href as the second parameter.

Now the function is ready: we just have to add an action to tell WordPress when to execute it.

add_action( 'wp_enqueue_scripts', 'load_google_fonts' );

That’s it. We used the wp_enqueue_scripts hook to call our function, and now the Google Fonts are loaded in our WordPress theme.

There’s, of course, a last thing to do.

Add Google Fonts in our CSS files

Remember all the informations Google gave us while selecting our fonts?  We can also find there the CSS rules needed to actually use the fonts in our website. So, let’s say we want to use Nunito Sans in our body, and Roboto for the headings, we can write something like this:

body {
    font-family: 'Nunito Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
}

Of course, whenever  we choose a Google Font it’s important to pay attention to the load times, another useful information Google gives us when selecting our fonts.