How to Remove Google Font Lato in Twenty Fourteen Theme

Want to remove Google font Lato in your Twenty Fourteen WordPress theme? Is Lato font slowing down your site? Have you noticed how no text content is visible on your site on slow speed internet connections till the Lato font is loaded. We used the amazing 2014 theme and here is the way to do it.

Slow Loading Lato Font Variants!

If you see the functions.php file of the Twenty Fourteen theme, you will notice that by default it loads 7 Lato font variants!!

function twentyfourteen_font_url() {
	$font_url = '';
	if ( 'off' !== _x( 'on', 'Lato font: on or off', 'twentyfourteen' ) ) {
		$font_url = add_query_arg( 'family', urlencode( 'Lato:300,400,700,900,300italic,400italic,700italic' ), "//fonts.googleapis.com/css" );
	}

	return $font_url;
}

As it is the Lato font is a slow loading font and has a larger impact on page loading time, and adding 7 variants will have a huge 350 impact if you check the load time impact.

No wonder your site goes blank on text (also called Flash of Unstyled text) as the HTML loads quickly but the Lato font takes time to load. I recommend you read our tips on how to load Google Fonts faster.

1. Reduce Google Lato Font Variants

If you love the Lato font, an easier way would be to remove some font variants. This will have some design impact but you can reduce the variants. You need to edit the code in functions.php and reduce the font variants

Instead of loading
Lato:300,400,700,900,300italic,400italic,700italic

Try loading only the normal and bold variants.
Lato:400,700

Although this works, some text fonts in places like italics or blockquotes look awkward.

2. Remove Google Lato Font

You can remove the Lato font totally, and choose some other style like web safe Arial font which will load instantly. This is what we have done.

Add this code to your child theme at the bottom of the functions.php file. [Note that functions.php is a very powerful file and wrong changes can bring your site down. Always keep a backup via FTP if needed.)

// Remove Lato Font
function qot_dequeue_fonts() {
wp_dequeue_style( 'twentyfourteen-lato' );
}
add_action( 'wp_enqueue_scripts', 'qot_dequeue_fonts', 11 );

If you are still using the primary WordPress theme, then simply comment out the code. You should always use the child theme to get easier theme updates without ruining custom changes.

Do this and note how fast your site loads with the Twenty Fourteen theme. Try it.