Optimize Google Web Fonts

There are a couple of ways to add Google Fonts to your WordPress site. But everything has its cost. And so it is important to understand that adding Google Fonts to your WordPress site affects speed and performance.

Here at dotmycom we use web fonts in our logo, The default way would be to grab them directly from Google. This method uses their global CDN to deliver the fonts quickly from different servers from around the world. This method adds one request and 55kb to our total page overhead.

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

Since we are only using the font weight of 700 we can reduce file size by requesting only the weight we need. This method adds one request and 36kb to our total page overhead.

<link href='https://fonts.googleapis.com/css?family=Corben:700' rel='stylesheet' type='text/css'>

In our specific case we need to only use a limited set of characters from our chosen font. To only load the characters we need could reduce a font file size by 90% and have a significant increase on the overall load times. Using the text="" parameter along with the :"weight" parameter in your font URL will return the version of the font file you requested optimized for the specific characters you will need.

<link href='https://fonts.googleapis.com/css?family=Corben:700&text=dotmycom' rel='stylesheet' type='text/css'>

Now optimized for our needs we are down to one request with a file size of 3kb.

Like always test each method for yourself and see which one is the fastest and works the best for your WordPress site.