Get our posts emailed to you with our monthly newsletter, subscribe here.

If your using the Google font library on your WordPress theme, I wanted to use this article as an opportunity to better explore how you should be including the fonts within the theme. The Google libary has so many great fonts, its common to see WordPress themes using them, but its important to use them right within the theme.

A Common Error

The two most common errors I see when using Google font in WordPress are:

  • Including the Google font <style> link in the <head> markup of the theme.
  • Using @import in the theme CSS file.

Using these can cause long term problems and conflicts within your theme, this is particularly true if you wish to create a WordPress child theme or premium themes to sell.

Avoiding Common Errors

The best way to avoid the above problem is to use your WordPress functions.php file and the WordPres functions wp_register_style(); and wp_enqueue_style(); to register the Google font and then include it into WordPress at the correct point.

In the below code, I opened my WordPress themes functions.php file, backed it up and then added:

/*-----------------------------------------------------------------------------------*/  /* Register and load front end CSS  /*-----------------------------------------------------------------------------------*/    if( !function_exists( 'tj_enqueue_styles' ) ) {      function tj_enqueue_styles() {           wp_register_style( 'bree', 'http://fonts.googleapis.com/css?family=Bree+Serif', array(), '', 'all' );          wp_enqueue_style( 'bree' );      }      add_action('wp_enqueue_scripts', 'tj_enqueue_styles');  }

In the above code, I use wp_register_style() function to safely register the new style with WordPress, the Google font I wanted to use is Bree Serif, I name the wp_register_style() $handle ‘bree’ which is its unique identifier and then pass the Google font URL to the wp_register_style() $url parameter.

Once we have safely registered the new style I use wp_enqueue_style() to add the font to our WordPress page, I pass the registered styles unique identifier to the wp_enqueue_style()  $handle parameter to call it.

Finally I use the add_action() function to hook our above function tj_enqueue_styles to the wp_enqueue_scripts action which will add our style into the WordPress theme.

The CSS

Once you have added the above function you can set up the font-families in your theme CSS file. In this instance, I open my theme style.css file and set up the new font family:

h1 {      font: 400 36px 'Bree Serif', serif;  }

Posted by David Martin

David Martin is a WordPress developer & entrepreneur from the UK. He owns DesignWoop, CardDsgn and WhoDesignToday. Catch up with David on Twitter.

2 Comments

  1. would you mind explain a bit more what problems it would give to throw the Google Style link in the head?

  2. This is a great tip, thanks. I also think it’s important to keep the number of google fonts to no more than 3 at most. It can really impact performance when too many google fonts are used.

Comments are closed.