Add Google Fonts to WordPress

There are so many terrible examples on adding Google Fonts to WordPress.

You should NOT use @import, nor just place the HTML in the header. Instead use a function and enqueue it!

/**
 * Enqueue Google Fonts.
 */
function custom_enqueue_google_font() {

$query_args = array(
 'family' => 'Open+Sans:400,300,700|Roboto:400,700|Gloria+Hallelujah'
 );

 wp_register_style( 'google-fonts', add_query_arg( $query_args, "//fonts.googleapis.com/css" ), array(), null );
 wp_enqueue_style( 'google-fonts' );

}
add_action( 'wp_enqueue_scripts', 'custom_enqueue_google_font' );

Update: It’s been brought to ¬†my attention that the above function isn’t translatable and can’t be easily extended into editor styles. Furthermore, if you’re submitting a theme to WordPress.org you will need to enqueue Google Fonts in accordance with Theme Shaper’s post on adding Google Fonts.

Author: Greg Rickaby

Greg is Lead Front-End Developer at WebDevStudios and author of a children's book titled, Creating a Website: Design and Build Your First Site!.

8 thoughts on “Add Google Fonts to WordPress”

  1. Thank you so much for this! As a new tweaker of child themes I was going crazy due to all the bad examples you mention.
    /peter

Leave a Reply