“99% of what we do on the Web, as designers, is typographic design”
Designers have been pushing for it for so long but now it is finally here in a form that works easily. @font-face basically allows you to use whichever font you like on your website without having to rely on your users having that particular font on their computer. Previously there have only been 9 web safe fonts and many designers felt restricted by having such a limited choice. This led to a series of font replacement techniques such as sifr and cufon, but these often took a lot of work to implement and would also slow down the loading times of your website. Quite simply @fontface will save us time and bandwidth using just a single font file on the server. According to the latest statistics from NetMarketShare we can achieve a minimum of 92% support cross browser.
Think before you use…
I do however believe we need to be careful when using these fonts as they have not been specifically designed for the web and therefore aren’t as effective as the traditional host of web safe fonts. Typographic master Mark Boulton holds a similar view:
Yes, it’s not as simple as dropping it in, which is one of my concerns about @font-face—that the barriers to entry for doing that are as simple as choosing Comic Sans from a drop-down. It requires no thought whatsoever. When you choose a font, you replace that bit in the middle with a different font, and it has an effect on all the surroundings. So yes, any font that’s dropped in there will affect the typesetting, the layout, the content, and the rhythm.
Beware free fonts even more…
We also need to be wary of using free fonts as often these free fonts, on the other hand, are generally only available in single weights. They’re very rarely available in multiple weights kerning is poorer
I would say though make sure you only use @fontface on larger headings as the fonts you are using haven’t been designed for web they will become ineligible at smaller sizes.
Fontsquirrel
Font squirrel have a Web site dedicated to @font-face fonts and this is a great way to get started with @fontface.
Some good examples which use @fontface
Here are a few sites which have successfully implemented
http://www.jigowatt.co.uk/
http://craigmod.com/journal/font-face/
The final word
@font face will certainly be used in future web projects as it can really add some uniqueness to your site…and I think the future looks even brighter whereby fonts will be designed specifically for the web allowing us to use them at any size without any worry!
|
|
