Optimizing Google Fonts in Themes

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 am a developer based in Austin, Texas. I run a little theme shop called DevPress and help manage a WooCommerce shop with Universal Yums. Find me on twitter @devinsays.

9 Responses

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

  3. Pat

    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

Leave a Reply to Kathrin Cancel reply