Experiments with @font-face

I’ve previously been a fan of Cufon for rendering web fonts, but this morning I thought I’d have a play around with @font-face. I tried it, of course, in Firefox first, and it worked. Hurrah. But IE uses its own proprietary font format .eot, created, or so I thought, by Microsoft’s own product WEFT. I’d heard the WEFT tool was unpleasant to use, but this still hadn’t prepared me for the grim reality….

However, via this excellent article I found Font Squirrel which does all the work for you.

Internet Explorer continues to be a pain, however, and applying the necessary css for IE needs some novel css construction – see the article for details. Having overcome this…

…you should see this text in a NASA-like font…

…unless you’re viewing in Opera 9, which doesn’t support @font-face. Otherwise, nice.

EDIT THE NEXT MORNING: After further experimentation I’m slightly put off by the “flash of unstyled text” which is noticeable in Firefox at least. There are some javascript hacks to try and address this, but if I’ve got to use javascript I think I’ll stick to Cufon for now.

Useful? Interesting? Leave me a comment

I've yet to find a way of allowing code snippets to be pasted into Wordpress comments - so if you're trying to do this you'd be better off using the contact form.