How to add Google Fonts to WordPress the Right Way

There are plugins you can use to add Google Web Fonts on your WordPress site, but if you’re a theme developer you may like your typography functionality and prefference to be inbuilt, not dependent on a third party plugin. In this short post, we’ll go over the best practices for enqueuing Google fonts in your WordPress theme

One of the most common mistakes people make while adding Google fonts to their themes is hardcoding URLs to Google font resources. We will use wp_enqueue_style (). We will write a function and add it on the correct wordpress hook. This will make it easier for the font be dequeued in another file or by child themes.

[php]
add_action(‘wp_enqueue_scripts’, ‘my_google_fonts’);
function my_google_fonts() {
$query_args = array(
‘fontfamily’ => ‘Open+Sans:400,700|Oswald:700’,
‘fontsubset’ => ‘latin,latin-ext’
);
wp_enqueue_style( ‘google_fonts’, add_query_arg( $query_args, "//fonts.googleapis.com/css" ), array(), null );
}
[/php]

Copy and paste the fonts from the link into line four of this example. If you included the subset option for special characters, enter it next to ‘fontsubset’ => which is on line five in the example above. Finally, save the file. Your can now use your selected fonts on your site and target specific elements with your font using css. For example:

[css]

h1 {
font-family: ‘Open Sans’;
}

[/css]