Reduce Google Web Fonts Loading Time for Webpages

Web fonts are now used everywhere for adding more creativity to the work. Whether it is a Word document or a Photoshop design, they can be used everywhere. But most of all, they find uses in web pages for attracting visitors. Today I'm highlighting some good ways that can reduce the font loading time by 90%.

Tip #1 Combine Multiple Request in One

If you are using more than one web-font in your pages, do not import them individually. If you do so, the browser has to open as many request for loading them, thus taking longer time. Rather use this technique to call them in a single request.

Tip #2 Reduce Font File Size

Calling a font file loads all possible alphabets, numerals and special characters that we may not need.

Glyphs Characters

Many times it is seen that Google web fonts are only used for displaying some particular texts like heading of the blog, article etc. In such cases you know that it would be limited to some known alphabets. For example, if I need to render the text "title of my blog" using the font "Brawler", the simple request code may be this.

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

But this code downloads the full font file with a size of 53.3 KB. This file contains many versions of each letter and a lot of different letter-pairs (aka "ligatures") which we don't need. To avoid loading them, the modified font call may be

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

Here, in the text parameter I had supplied only unique letters that I need. The modified code pull down the font file size to 4.59 KB and saves 91%.

Problem - I am not sure which characters may render in article headings because it is a dynamic site. What should I do?

Solution - If you are sure that none of any glyphs will appear in the headings but only alphabets and numerals will be there, you can use this code.

<link rel='stylesheet' type='text/css'
href='http://fonts.googleapis.com/css?family=Brawler&text=abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789%20'>

Here we are importing all characters and numerals except glyphs. The font file in this case is 15.21 KB in size and that's still 71% lower than the original Google font file.

The %20 included in the text list represents the space character. Without this, all spaces used inside that font tag will show as unknown character. Similarly, you can add few more special symbols by using their Unicode representation.




You may also like: