How to use Google Fonts in your WordPress theme (the right way)

If you’re using Google Fonts as part of your WordPress theme’s design, there are a number of ways to use them. Here’s the right way to do it and it’ll take you less than five minutes.

1. Go to Google Fonts and select the font(s) you wish to use for your site.

2. When you’ve selected your font(s) and customized it, select the Embed tab. Notice the URL provided. We’ll need that in a moment.

Screenshot of embed option in Google Fonts

3. Open your functions.php file in your WordPress theme and paste the following:


function add_google_fonts() {

wp_enqueue_style( 'wp_google_fonts', 'GOOGLE FONT LINK WILL GO HERE', false );

}

add_action( 'wp_enqueue_scripts', 'add_google_fonts' );

5. Copy and paste the URL from the Standard embed option from your Google Fonts page, replacing ‘GOOGLE FONT LINK WILL GO HERE‘.


function add_google_fonts() {

wp_enqueue_style( 'wp_google_fonts', 'https://fonts.googleapis.com/css?family=Roboto', false );

}

add_action( 'wp_enqueue_scripts', 'add_google_fonts' );

Using Google Fonts with other scripts enqueued in your theme

Using the enqueue function is the best way to use stylesheets and JavaScript files in your theme and you don’t need a separate function to include Google Fonts, as in the following example:


function add_theme_scripts() {
  
  // theme default stylesheet
  wp_enqueue_style( 'style', get_stylesheet_uri() );
  
  // Google Fonts 
  wp_enqueue_style( 'wp_google_fonts', 'https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,500i,700,700i,900,900i', false );
   
  // Custom JS functions 
  wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
 
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

Voila.

Post a comment

Fred looking at his camera phone with a dumb grin on his hairy face About

I'm an Ottawa-based web designer and front end developer who's been in the industry since HTML was written in all-caps with inline CSS. I like writing about the web as well as my other creative interests. Follow me on Twitter

Discussion

Requests for help are welcome but my schedule means I may be unable to respond right away.