Google web font performance

Google web font performance

Google Web Fonts is a free web font embedding service launched by Google in 2010. Google currently offers more than 570 font families and counting, each with an Open Source license which means you can use fonts freely on any personal or commercial project. Google does a decent job of optimising and serving these fonts to the end user but as web developers we can make it even better with some quick improvements.


1. Select only the font styles/weights that you will use

If you have previously used Google Web Fonts then you’ll have noticed that some fonts come with multiple styles and weights. My first recommendation is to select only the font styles/weights that you are going to use within your website. For example the “Open Sans” font comes with 10 different styles, and selecting each of these would be inefficient if you are going to use normal and bold styles only within your website.


2. Select only the character set that you will use

One of the best features of Google Web Fonts is that you can choose your own character set. This basically means that you don’t need to download every character set that the font has to offer. Selecting only the character set(s) you require for your website will reduce the overall font file size.


3. Combine multiple font requests into one

Most developers don’t know about this feature, but If you are using multiple font families within your website you can combine them into one. You can do this by separating the font family names with a pipe character (|). This reduces multiple HTTP requests to a single HTTP request which is obviously much more efficient. However, please do note that this optimisation will not reduce the overall font file size.

Before:

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

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

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

After:

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


4. Character subsetting

This new feature allows you to specify only the individual characters you may require for a logo or heading within your website. By specifying the text= value Google will return a font file that’s optimised to your requirements. Using it is easy, just specify the text= value in your font request URL. For example,

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

According to the official Google docs this simple optimisation can reduce the overall font file size by up to 90%.