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.