Optimizing Google Fonts in Themes

Posted

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.

About Devin

I'm a WordPress developer based in Austin, Texas. Follow my projects on GitHub, or more general WordPress ramblings as @devinsays on twitter.

5 thoughts on “Optimizing Google Fonts in Themes

    • Anh Tran wrote:

      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.

      • Blaine wrote:

        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.

  1. 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.

  2. Ryan Hellyer wrote:

    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.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>