There are a number of methods to load Google fonts in a WordPress theme, but some are more efficient than others. Google has a post about optimizing the use of the Font API. I thought I’d summarize this as it applies to WordPress themes.
Enqueue or @import?
One of the simplest ways to load Google fonts is to do a an @import from the stylesheet, but Google recommends to link directly from the head of the document instead.
Properly enqueing the font and loading it from the head will also make it easier for people using child themes to change the font without copying the entire parent stylesheet over.
Here’s an example of how to load the “Source Sans Pro” correctly so it is linked from the head. This code snippet would go in functions.php:
function prefix_fonts() {
// Source Sans Pro
wp_enqueue_style( 'prefix_source_sans', '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic', array(), null, 'screen' );
}
add_action( 'wp_enqueue_scripts', 'prefix_fonts' );
If you wish to load a different font from a child theme, you would need to remove the font from the parent and then load their own using the above method. To remove the action from the child theme, this could be used:
remove_action( 'wp_enqueue_scripts', 'prefix_fonts' );
Combining Fonts
This is something I wasn’t aware of until Emil Uzelac pointed it out, but you can bundle multiple fonts in a single API call. This will save on HTTP requests and make the loading more efficient. Let’s say you wanted to load the fonts “Noto” and “Source Sans Pro”. Instead of loading it like this:
function prefix_fonts() {
// Source Sans Pro
wp_enqueue_style( 'prefix_source_sans', '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic', array(), null, 'screen' );
// Noto
wp_enqueue_style( 'prefix_noto', '//fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic', array(), null, 'screen' );
}
add_action( 'wp_enqueue_scripts', 'prefix_fonts' );
You can do it with a single enqueue:
function prefix_fonts() {
// Source Sans Pro + Noto
wp_enqueue_style( 'prefix_fonts', '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic|Noto+Serif:400,700,400italic', array(), null, 'screen' );
}
add_action( 'wp_enqueue_scripts', 'prefix_fonts' );
Be Careful of SSL
In both of the above examples you’ll notice I enqueue the font using “//fonts” rather than “http://”. This is so you theme will load correct even if the site uses SSL (https vs. http).
Use Only What you Need
This is probably the most important suggestion. Many Google fonts have several different weights (400,600,700, etc) and styles (italic). If your theme isn’t using those specific weights or styles, make sure they’re not being loaded. And of course, don’t enqueue any fonts that aren’t in use.
I noticed the Twenty Fourteen theme builds the Google font url with add_query_arg() before being enqueued. Do you see any added benefit with this approach?
add_query_arg( 'family', urlencode( 'Lato:300,400,700,900,300italic,400italic,700italic' ), "//fonts.googleapis.com/css" );It helps you to see what font and what styles are used easier. But sometimes I see the “urlencode” doesn’t work with that approach.
urlencode doesn’t work when the Google font’s name has spaces. Google requires spaces to be converted into plus signs ‘+’ and throws a fit if it’s then encoded. Other characters like commas and pipes ‘|’ encode fine.
Google’s documentation recommends url-encoding custom text, but doesn’t mention doing that for fonts. I believe the Twenty Fourteen theme uses urlencode so it validates.
I was excited the day I found out you could enqueue multiple fonts in one call from Google. I think one of the default themes has a good example of it.
One note, if a theme has a bunch of scripts enqueues in one wp_enqueue_scripts action, you can also use wp_dequeue_style to just remove the one that was loaded, as long as the priority on your action is later.
Thanks for reminding me about this. I was aware of it, but at some point must have forgotten, as most of my current themes use @import instead.
We use these best practices inside our Typecase plugin and recommend it to people who are comfortable working with CSS selectors who are looking to add custom fonts to their themes. I like the plugin approach because it works exactly like Typekit, which allows you to apply fonts to specific selectors. We merge all the arguments into a single call to GWF.
Great help, just what I was looking for! Thank you!
Hi, glad to have found this post but I have a question I hope you can answer (in case I mess things up). I’ve just changed my site from http to https with the installation of SSL. All looks well but the theme I use links to Google fonts over http rather than https. I understand I have to edit the URL (maybe in ‘Functions.php) but don’t want to touch the parent theme. What can I do in the Child Theme so that all Google fonts will connect via https rather than http.
I’d be hugely appreciate if you can help. (I’m at the limits of my understanding here!) Thanks
You’ll have to dequeue the script (i.e. font) from the parent theme (https://codex.wordpress.org/Function_Reference/wp_dequeue_script), and then enqueue the script (font) again properly from the child theme. Or, use a different parent theme- if this isn’t done right, I’d be concerned about overall code quality in the theme.