How to properly add Google Fonts into your WordPress theme

When you go to fonts.google.com and pick out your fonts, Google gives two simple instructions for adding the fonts to your website. If you have a WordPress website, those two suggested methods aren’t the best practice. For the sake of some examples below, I’ll be using Roboto font. You will need to replace Roboto font with your own Google Font choices.

Incorrect ways to load Google Fonts in WordPress

1. Standard method: “To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document.”

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

2.@import method: “To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document.”

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
</style>

OR you can @import directly into your style.css file like this:

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twenty-fifteen-child
*/

@import url('https://fonts.googleapis.com/css?family=Roboto');

Proper way to load Google Fonts in WordPress

Assuming you’ve already created a child theme, open your functions.php file and copy this code:

function wpmaster_google_fonts() {

wp_enqueue_style( 'wpmaster-google-fonts', 'https://fonts.googleapis.com/css?family=Roboto', false ); 
}

add_action( 'wp_enqueue_scripts', 'wp_master_google_fonts' );

By avoiding using the other two methods to load your fonts, you will be shaving down your page load time. We have noticed a 0.8 – 1 second decrease in page load time. We hope you found this helpful!