How to load Google Fonts in a child theme

Last Updated On June 10, 2019

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.

/*
Theme Name: Twenty Seventeen Child
Version: 1.0
Template: twentyseventeen
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

style.css

<?php
// Place all your custom functions below this line.

add_action( 'wp_enqueue_scripts', 'twentyseventeen_child_scripts' );
function twentyseventeen_child_scripts() {
	wp_enqueue_style( 'twentyseventeen-parent-style', get_template_directory_uri() . '/style.css' );
}

functions.php

If you don’t know what these files are or why are needed, make sure to first read our tutorial on child themes:

Beginner’s guide: 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:

/*
Theme Name: Twenty Seventeen Child
Version: 1.0
Template: twentyseventeen
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

@import url('https://fonts.googleapis.com/css?family=Ranga:400,700&subset=latin-ext');

@import method

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:

.site-title {
	font-family: 'Ranga', cursive;
}

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:

@import url('https://fonts.googleapis.com/css?family=Indie+Flower|Ranga:400,700&subset=latin-ext');

expanding the previous example we can use both fonts on the site’s branding text like this:

.site-title {
	font-family: 'Ranga', cursive;
}

.site-description {
	font-family: 'Indie Flower', cursive;
}

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:

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<link href="https://fonts.googleapis.com/css?family=Ranga:400,700&subset=latin-ext" rel="stylesheet">

<?php wp_head(); ?>
</head>

the link method

Similar to our previous example, the configuration for more than one families would look like this:

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Ranga:400,700&subset=latin-ext" rel="stylesheet">

<?php wp_head(); ?>
</head>

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:

add_action( 'wp_enqueue_scripts', 'my_google_fonts' );
function my_google_fonts() {
	wp_enqueue_style( 'my-google-fonts', 'https://fonts.googleapis.com/css?family=Indie+Flower|Ranga:400,700&subset=latin-ext', false ); 
}

That’s it. Now you can use the fonts as usual in the style.css file.

Signing off

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!

How to load Google Fonts in a child theme

Create the child theme

Adding the Google Font

The @import method

The link method

Enqueuing the fonts

Signing off

Leave a Reply Cancel reply

Subscribe to our newsletter

Categories

Recent Posts

Get access to all WordPress themes & plugins