How to Optimize Google Web Font

Google Web Font is one of the more popular ways for embedding custom font on a website. It is free, and there are many options to choose from in the library. In spite of being served from fast Google servers, there are still a few areas that need improvement.

So, let’s see what we can do to improve Google Webfont’s performance.

Delivering Certain Font Styles

Fonts in Google Webfont provide font styles like bold, italic, light. Adding all these font styles to the specification will increase the font size and also affect the page load performance.

As we can see below, by deselecting some of the styles, the page load will turn much faster.

Google makes it easy for us to include only the styles that we need. In the following example, we select only the light and normal version of Roboto Condensed font family.

 <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300' rel='stylesheet' type='text/css'>
 

We can see from the screenshot below that the bold style is not rendered properly without specifying in the Google Webfont stylesheet.

However, it gives us better load time as the browsers load fewer font files.

You can see the demo below.

• View Demo

Font Sub-setting

Several fonts in Google Webfont also provide multiple sets of character to support several languages. For example, the Roboto Condensed font family provides the character set for Cyrillic, Greek and Vietnamese characters. Google provides the option for easily selecting which character set we want to include.

By including these character sets, it will increase the font size and hurt the page load performance. So, leave what is not necessary unchecked.

In this example, we added the latin, greek, and cyrillic characters. But, we only include the latin and greek set in the Google Webfont stylesheet, as follows.

 <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,greek' rel='stylesheet' type='text/css'>
 

Hence, the cyrillic characters are not rendered with Roboto Condensed font family from Goole Webfont.

See the the live demo to see the font in action.

• View Demo

Serving Certain Letters

There are times when we know the certain letters we are going to embed on the website. Thus, providing the entire font letters of the font family would become useless. Google Webfont provides the option for which to include only the characters that are necessary.

We can include specific letters by adding the following &text={letters} next to the font family name. In the following example, we set the l, o, and g characters in the Google Webfont stylesheet, as follows.

 <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&text=log' rel='stylesheet' type='text/css'>
 

That way, we can only use the letter l, o, and g from this font family, Roboto Condensed. The word logo, probably, is the perfect example, in our case; it renders all the letters included in our Google Webfont specification.

By including only the necessary letters, it can significantly decrease the font size. It is worth noting, though, the letters we included are all the small letters. The capital letters of these letters, l, o, and g will not be served as well as all other excluded letters.

• View Demo
• Download Source