Add google web fonts in WordPress the right way

Google has been supplying the community with a large collection of web-based fonts for quite a few years. There are several ways Google allow you to use these fonts for free on your website. Google also provides instructions for embedding and using these fonts on your website which works great for static HTML websites but fail on WordPress based websites. Simply adding Google Web Fonts in theme header is not recommended by WordPress developers. So today I’m going to show you the right way to add Google web fonts in your WordPress site.

Of course, there are lots of plugins available to add Google web fonts on your website, but this little task definitely falls into the “you absolutely do not need to use a plugin for this” category. After all, you want to keep your site lean and mean. And also if you’re developing a theme, chances are you’d like your typography choices to be tied to your theme, not dependent on a plugin. So we’re going to use the wp_enqueue_scripts action hook to embed Google web fonts in our site.

Simply paste this following WordPress Snippet in your theme’s functions.php file. This code snippet will add Google Noto font in your website – if you like to use a different goole font just replace Noto font on line 19 with your font.

/**
 * Add Google Fonts Noto URL
 * ref: https://github.com/WordPress/twentyseventeen/blob/master/functions.php#L127
 */
if ( ! function_exists( 'ns_fonts_noto_url' ) ) :
function ns_fonts_noto_url() {
	$fonts_url = '';
	/**
	 * Translators: If there are characters in your language that are not
	 * supported by Noto, translate this to 'off'. Do not translate
	 * into your own language.
	 */

	$noto_sans = _x( 'on', 'noto_sans font: on or off', 'ns' );

	if ( 'off' !== $noto_sans ) {
		$font_families = array();

		$font_families[] = 'Noto Sans:400,700';

		$query_args = array(
			'family' => urlencode( implode( '|', $font_families ) ),
			'subset' => urlencode( 'latin,latin-ext' ),
		);

		$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );

	}

	return esc_url_raw( $fonts_url );
}
endif;



/**
 * Add Noto Google Fonts
 */
if ( ! function_exists( 'ns_add_google_noto_fonts' ) ) :
function ns_add_google_noto_fonts() {
		wp_enqueue_style( 'ns-google-font', ns_fonts_noto_url(), array(), null );
}
add_action('wp_enqueue_scripts', 'ns_add_google_noto_fonts');
endif;

Thank you for seeing my tutorial and feel free to share and comment :). Do you have a code snippet and you want to see it published on my site? I will be more than happy to do it please send me a message (here)

ABOUT AUTHOR

Nuno

Hi, I'm a Freelance Web Developer and WordPress Expert based in London with a wealth of website development and support experience. I am great at problem solving and developing quick solutions.