Web Fonts are Here!
Some of my random reading just updated me on the current status of web font downloading via the @font-face CSS directive — and things are looking up!
Last time I had looked at @font-face, it was still pretty much theoretical. Now it turns out that the newest versions of most modern browsers support it – and IE is supported back to IE6! Sadly, Google Chrome isn’t showing us any love here.
Fortunately this technique doesn’t need any of those sly image replacement tricks we’ve wrestled with in the past; the browser just renders fonts as God (or Berners-Lee) intended. Hence, no problems with search engines, screenreaders and command-line Unix curmudgeons.
The only difference from normal font specification is in telling the browser where it can look to download the font if it’s not present. That’s where @font-face comes in. The whole thing is pretty easy to set up, too. Here’s where you can get some help:
CSS @ Ten: The Next Big Thing (old article)
Mo’ Bulletproofer @Font-Face CSS Syntax (This is the syntax I use.)
ttf2eot on the web! (Creates the special font format needed by IE)
One thing to look out for — it’s best if the downloaded font has similar metrics to the fallback font. The font I used on a recent project turned out to be quite small, and had to have the sizes jacked up in order to look right. That means that on browsers that don’t support font downloading, the fallback font looks huge. It’s still quite usable, though.
Typophiles and standards gurus, rejoice! The web is now looking a little more friendly to both crowds. Now if Google will just get with the program…
UPDATE: It appears that Google has fixed the problem with Chrome’s support of @font-face. It appears to work just fine in Chrome 4 for Windows!