How to Enqueue Google Fonts in WordPress

Custom fonts on the web are becoming ever more popular so in this post I'm gonna show you how to add Google fonts to your Wordpress website.

Custom fonts on the web are becoming ever more popular so in this post I'm gonna show you how to add Google fonts to your Wordpress website. Google Fonts is one of the most popular custom fonts provider and it's really easy to implement them to your web page. You could of course copy the <link> tag as provided by Google fonts and hard code it by pasting it straight to your header but there is a much better way to do that. To do that we use the wp_enqueue_style() function. This function is usually put in to the functions.php file.

Default Google Fonts Snippet

After you've found the fonts you would like to add to you page, just click the Quick use button and you will find a link tag similar to this

<link href='http://fonts.googleapis.com/css?family=Alef' rel='stylesheet' type='text/css'>

Now copy the href value but leave the "http" part and paste it into the function below.  

Enqueue Google Fonts Snippet

	// Enqueue Styles and Scripts
	function enqueue_assets()  { 

		$protocol = is_ssl() ? 'https' : 'http';

		// add fonts
		wp_enqueue_style( 'themename-googlefonts', $protocol.'://fonts.googleapis.com/css?family=Alef' );	
	}
	add_action( 'wp_enqueue_scripts', 'enqueue_assets' );

You can copy this code snippet into your functions.php file and Google fonts will be added to your wordpress pages on the fly. This ladies and gentlemen is the right "right" way to enqueue google fonts to your wordpress page.