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, "//" ), 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 you will need to enqueue Google Fonts in accordance with Theme Shaper’s post on adding Google Fonts.

Author: Greg Rickaby

Greg is Director of Engineering 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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.