As of a couple of minutes ago, this site has relegated the venerable sIFR to the dustbin of history, opting instead for the bright future of true custom fonts using the @font-face CSS declaration that has been around since 1998.
Why it took so long for custom web fonts to become an in-browser reality is a tangled tale involving browser wars, font foundry fears and a general inertia of rest. Many thorny licensing issues remain regarding the use of commercial fonts on the web, which is why there’s been a proliferation of third-party solutions such as TypeKit, Fontdeck and Kernest cropping up.
But there are also headache-free choices such as the excellent free fonts from Jos Buivenga’s exljbris Font Foundry. Since Jos explicitly allows @font-face embedding, this site uses his excellent Delicious font for menus and headings, and will run smoother and faster than ever thanks to ditching sIFR’s Flash dependency.
Not all is sunshine and roses. The iPhone version of Safari has disabled @font-face linking for some reason unknown to me. IE has its own proprietary format that involves acronyms like EOT and WEFT, alongside a high probability of animal sacrifice to appease the demons who designed WEFT. But there is a light at the end of tunnel, and we’ve stepped through it.
I was just reading about this in my copy of Handcrafted CSS by Dan Cederholm. I had read snippets of it on the web but never gave it much thought — good to see it in use.
@Chris Cool, I’ve been debating picking that book up. Are you liking it?
check out cufon 🙂
@Oliver I’ve seen Cufon, but using native fonts via
@font-faceis superior in every way. Cufon is a (brilliant) hack that loses its utility with the arrival of proper font embedding.
Yeah, @font-face is wonderful, isn’t it?
Quick note: You should be able to get your typefaces working on Mobile Webkit if you provide SVG font files.
@Christopher Quite right you are, just haven’t gotten around to it — I implemented
@font-facebefore the knowledge about SVG fonts for mobile WebKit and Chrome started making the rounds.
Oh, and love that you’re using IM Fell on your blog. Lovely. 🙂