Our Thoughts

Jul
14
2014

Reducing Google Fonts file size

by Cat

Google Fonts offers a huge selection of fonts that designers and developers can readily use in their projects, and they are certainly a welcome free alternative to subscription font services such as Adobe’s Typekit or fonts.com.

Even these free web fonts, however, come at a price: each font and variation of the font that you choose to include increases the load time. For example, selecting a few more styles of ‘Open sans’ could easily increase the load time 5-fold.

Google Fonts Example

Of course you can significantly reduce load time by choosing only the styles that you need. However, there is another, less well-known tip: specify the characters and/or letters that are needed on your page in the font call.

Let’s say that you are using ‘Montserrat’ in the logo of a company called “Awesome!” and nowhere else on your website.

Normally, you would call on the Montserrat font this way:

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

What this does, however, is that it loads all the possible alphanumeric and special characters for this font when you really only need it to render your logo. To specify only the characters that you need, simply add it as a parameter at the end of your font call:

<link href='http://fonts.googleapis.com/css?family=Montserrat&text=awesome!' rel='stylesheet' type='text/css'>

Similarly, if you know that you are only using a font in a specific alphabet such as the Cyrillic alphabet used in Russian, Bulgarian, and a number of other Eurasian languages, you can specify that in the font call to reduce load time.

For example:

<link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=cyrillic' rel='stylesheet' type='text/css'>

Lastly, make sure that you combine multiple font requests into one whenever you use more than one Google Font for your website. This way, the browser only has to open one request to load all of your fonts.

Instead of:


<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

Use:

<link href='http://fonts.googleapis.com/css?family=Open+Sans|Montserrat' rel='stylesheet' type='text/css'>