How To: Fast Load Google Web Fonts for Pagespeed

This tutorial will tell you how to fast load google web fonts on your blog. When it comes to stylish fonts, Google web fonts currently has the richest repository of wide variety of open source fonts which can be used on your site.

Lets agree upon one fact, there are only a bunch of web safe fonts available (like Arial, Helvetica, Times New Roman, etc) and most of them are not at all good looking.

That’s why webmasters and bloggers are using custom fonts on their sites to make their design stand out.

If you are using the Genesis Framework like we are, all the Studiopress themes already come with a set of Google web fonts, in our case namely Oswald and Droid Sans.

Looking at the site structure (css), you will notice that these child themes, are using the css @import rules to get the fonts from Google. This is not a good way to load fonts on your site. Google Pagespeed already recommends that we should avoid using import rules in your stylesheets as this can lead to slow page load.

Today i will tell you how we are loading Google Web Fonts on our site, by which you can increase your site speed considerably.

1. Remove import rules from your stylesheet

Ok, first things first. Open your WordPress Dashboard, go to Appearance > Editor. Make sure you are editing style.css. Now remove these rules, which will be located at the start of your css file, perhaps a little down below. In my theme’s style.css it is found at Line no. 77.

fast load google web fonts remove css imports How To: Fast Load Google Web Fonts for Pagespeed

Just select both the import font urls and press delete. Now click on Save changes

2. Get fonts using the Standard link tags

Visit Google web fonts cabin. Choose your favorite font, click on Quick use. Scroll down below, and you will see a box which says ‘Add this code to your website‘. Now make sure you are in the standard tab, you will notice a link href for your font. Just copy this line and paste it in the head of your theme.

In wordpress, you can paste this in header.php.

Alternative (For Genesis and Thesis themes)

You can ignore this part if you are not using any of the above frameworks.

If you are on a genesis theme, you should paste this line in your functions.php and pass it with a add action routine, just like this:

/** Add Google Web Fonts */
add_action( 'genesis_meta', 'add_google_fonts', 5);

function add_google_fonts() {
		echo '<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid Sans|Oswald" media="screen">';
}

Copy paste the above function in your functions.php file after the starting <?php tag. Don’t forget to replace your fonts in the href line. You can reference more than one font by using the | operator. When done, click on Save changes.

If you are on a thesis theme, use the same method but change the appropriate meta hook for thesis in the first line.

Note: Using many fonts on your blog will slow down your site. Keep it to a minimum of 2 or 3 at the most!

Now lets take a look, as to what we are doing in this function so that next time you can build this yourself.

First, we are including a function named add_google_fonts in your theme (document head, to be precise) using the genesis_meta hook. We are also giving it a priority 5, so that these fonts styles will load faster, and hence will not let your users see a fallback font such as Arial being displayed, as soon as they visit your site.

3. Use Font names in your css

Finally, now you can use the google web fonts in your css. Just refer it using the font-family property:

font-family: ‘Oswald’, Arial, Times;

Thats it!

Wasn’t this tutorial on how to fast load google web fonts easy? If you want you can also test it using the Pagespeed tool. Just test your homepage, and make sure the objective ‘Avoid CSS @import‘ is done.

fast load google web fonts check google pagespeed How To: Fast Load Google Web Fonts for Pagespeed

If you want more such Pagespeed tutorials, then subscribe to our Newsletter!

Thanks for the code Wpbeginner

Subscribe to our Weekly Newsletter

I take your privacy very seriously

Comments

  1. karthik Reply

    Congo to your websites new look gautam,the theme is sleek,loads quickly and whatelse do we need…….

  2. King Reply

    Thanks buddy, I have removed the @import function from my style.css page and have successfully imported the fonts to functions.php file.. thanks for this piece of code..

Leave a Reply

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail.