Optimising Google Fonts for Fast Load Times

Using web fonts can be a great way to improve the look and feel of your website. I love tinkering with different font combinations on websites and seeing the changes they make. Unfortunately, adding web fonts to your site adds extra overhead to your site and can often slow your page load times. If you've worked hard to ensure that your application has a fast load time, the last thing you want to do is slow it down with extra HTTP requests that carry unnecessary weight.

Specify Text

There might a time when you know in advance which particular letters of a web font that you'll need. This often occurs when you're using a web font in a logo or heading. Fortunately, Google Fonts allows you to specify the exact text that you might be using in the text= value in your font request URL.

For example, you would call the font resource like so:

http://fonts.googleapis.com/css?family=Yellowtail&text=Hello

By specifying the exact text you require, Google Fonts will provide you with a font file that is up to 90% smaller than the original file size! Woah! In order to add more letters, simply add more characters to the text value in the font request URL.

To give you an example of the file size improvement, I use the Yellowtail font on the Web Typography site.

On this page, I only need text for the H1 tags in the header and footer. By specifying just the text I need, I managed to reduce the original file size from 18 KB to 3 KB.

Choose a subset

The average webpage often doesn't require the entire unicode character set of a font file, which means it is best to restrict the character subset to the characters that your page requires. There is no need to support a language set that your site may never use!

In order to use this functionality, you simply need to use the subset=value in your font request URL.

http://fonts.googleapis.com/css?family=Inconsolata&subset=latin

Open Sans, which is one of the most popular Google web fonts, provides support for 20+ languages, and comes in at 217 KB total, but only 36 KB when restricted to a latin subset.

Combine multiple fonts

Depending on your application, you might want to use font combinations to enhance the design. Instead of making a separate request for each font file, rather consider chaining the request together. To request multiple font families, separate the names with a pipe character (|).

http://fonts.googleapis.com/css?family=Yellowtail|Roboto+Condensed

In the request URL above, I am asking for the Yellowtail font and the Roboto Condensed font in one request. This simple trick will improve the load times of your font families.

Putting it all together

Because we want to keep our website pages as lean and fast as possible, this functionality allows us to combine all of these parameters together to produce a minimal font set. There is no reason why you can't add web fonts to your site and still achieve fast load times!