Limiting the use of Web Fonts

Web fonts have drastically improved the way we look at and read the web. The ability to remotely load a font in a web page has been possible as early as CSS2. In the past few years this got a lot of attention due to services like TypeKit and Google Web Fonts. Nowadays its a common thing on the internet. Even Blogger has a inbuilt support for Web Fonts. But now we have started overusing it and there are some disadvantages to it.

Recently I visited SmashingMagazine's website. They have done a total redesign in the past month. They are using web font (a.k.a. Skolar Regular and a couple of others) for all the text in the page. Its being served by Fontdeck and so there is a extra step involved for validation to check the Font is being only used by the website that bought the rights for it.

As you will observe the Black highlighted portion is actually text. It is taking a lot of time load.

-In general Web Fonts take a heavy toll on the Page Speed as well as Page Size. They are like scripts ,the more you have the higher the page load time.

-Another problem with web services like TypeKit ,Fontdeck ,etc is that they perform a validation check to make sure that Fonts are being used by their customers alone and not anybody else. This also increases time lag as server side action from there side is required.

-Solution to this problem is to limit the number of fonts being used on a single page. The ideal number is around 3 or 4 per page. Opinions vary on this but the rule of the thumb is to use what you really need.

-Another possible solution is to include these fonts in the Head of the page. This will make sure that they are loaded in the starting.

-One more way is to load the Fonts asynchronously. This makes sure that once the Page is loaded then only will the Fonts will be loaded. This sometime might show blank pages but a nice method for clean loading.

TIP: If you are using Google Web Fonts, then whenever you go on the details of any font in the directory, you come across a odometer kind of diagram on the right side. This denotes the effects of using that particular font on the page load times.

Make sure you check it and make decisions wisely. Lesser the value better the load speed.

Web typography and content go hand in hand. What is your take on this issue ?


Post a Comment

© 2009 Blogger Tips 2013 | Powered by Blogger