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 ?

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment
Rahul Roy said...

Thanks for detailed post about web fonts and giving additional tip..

Harbie said...

Fonts plays a big roll in the web design, for business we consider simple and formal font style. So true, web fonts affects loading time and that's not good specially for visitors.

You also need to limit your web font as style, as for display and others. It can affect the whole website. It’s correct you should really limit it, if it’s not needed then don’t use it. Thanks for your tips and very constructive article.

You also need to consider what web fonts will be use in your website. Web font is one the major factors developer must be consider because it is the reflection of the website’s company. It may affect the popularity of the company, and help your company to grow.