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.
Problems
-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.
Solutions
-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 ?
-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.
Solutions
-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 ?
Find me on
Thanks for detailed post about web fonts and giving additional tip..
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.