Continuing on from our previous post on how to add custom fonts to your WordPress site using a child theme, today we’ll tackle the task of adding Google Fonts to your site, again with the help of a child theme.
Just for the sake of completeness we’ve added the procedure to create a child theme, and a link to more info on them, below.
Create the child theme
Of course we will need a child theme, we’re going to base this guide on the WordPress Twenty-Seventeen default theme, so start by creating a folder called twentyseventeen-child, inside the folder create two files, the style.css and the functions.php ones, then paste the respective code into each one. When you are done you can go to Appearance > Themes in your dashboard and activate the new child theme.
If you don’t know what these files are or why are needed, make sure to first read our tutorial on child themes:
Adding the Google Font
We’ll check out three ways to add the Google Fonts on our site.
Start by going to https://fonts.google.com/ and select your preferred font family ( or families ). We’re going to work with Ranga and Indie Flower for this example.
Once you select a family you can check out the customize tab to select more font weights and subsets if needed.
The @import method
In the embed tab you can see the @import option, grab the @import line which is compiled with the selections you’ve made for the font and paste it at the top of your child theme’s style.css file, just below the child theme’s desription header, like this:
Now you can use the font in your styles using the font-family property, for example to use it on the site’s title you can use this:
In case you need to add more than one font families you can either repeat the procedure and add the new @import line below the first one, or add two or more families on your selection on the Google Fonts site and get the combined @import url, for example one like this:
expanding the previous example we can use both fonts on the site’s branding text like this:
The link method
Another method, which is better when it comes to performance, is the link method. In the embed tab of the font selection, under standard, you will see the link to your selected font families.
These will have to be added in the theme’s header.php file. So copy over the parent theme’s header.php file to the child theme’s folder and edit it. Place the link inside the head tag, preferably above the wp_head bit. For example in twentyseventeen it should look like this:
Similar to our previous example, the configuration for more than one families would look like this:
Using the new fonts in the style.css files is exactly the same as before.
Enqueuing the fonts
The third and final way we’re going to check out is by enqueuing the fonts in the functions.php file. To do that grab the href bit from the embed link and paste it the the functions.php file of the child theme, like this:
That’s it. Now you can use the fonts as usual in the style.css file.
This concludes our small tutorial on how to add Google Fonts to your WordPress site using a child theme! We hope you’ll find it useful and use it in your future projects!