OK, so I’m redoing my site. I’m using three new/trendy things:
- HTML5
- CSS3 effects
@font-face
Believe it or not, I’m not doing this just to be trendy. I believe all of them will help create websites that are more usable and easier to build. I’m going to record my experience of all these new web design techniques, starting with @font-face.
Why use @font-face
For us graphically challenged types (at school I got an E for effort and a 5 for attainment in art), @font-face is a good thing:
- Instead of adding a logo to a site, we can create a fancy wordmark. For clients on a budget, this is a good thing.
- It provides some texture if we’re text–based designers using the standard web fonts
Baskerville. Work's afoot on an open, free version. (Image from Wikipedia)
Problems with @font-face
- Windows and IE render many fonts poorly
- It’s a bit like a kid in a sweet shop: It’s easy to make some poor choices
- FOUT and slow download times
The first two problems will have to be resolved by designers using their judgement properly… as ever, Mac–based designers will have to step away from their beautifully–rendered text and face up to their designs in the real world (unless they’re designing sites for other Mac-based designers).
Font designers offering freely embeddable fonts will do well in this brave new world. I don’t see type subscription services taking off beyond the typophile community. In turn, we’ll soon get familiar (or bored) with certain fonts (Museo and its variants and League Gothic spring to mind.)
Thanks to some sterling work by Snook and Font Squirrel, we can now begin to tackle the FOUT problem. Here’s how I’m currently implementing @font-face:
- Build lightweight font files by removing all unnecessary glyphs (using Font Squirrel’s generator)
- Use the data method for Firefox, Safari, Chrome and Opera
- Use a conditional statement to get IE to download the EOT file
Which means we get virtually instant display in all browsers except IE. Acceptable at this moment in time, although it’s a fast–moving area (and exciting!)
Tweet this post → or contact me on twitter: @leonpaternoster