That Delicious @font-face

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.

font-face-vs-sifr2

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.

By Matt | Posted in Design, Web Standards | Comments (6)

6 Comments

  1. Chris
    Posted September 10, 2009 at 9:45 am | Permalink

    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.

  2. Matt
    Posted September 10, 2009 at 10:14 am | Permalink

    @Chris Cool, I’ve been debating picking that book up. Are you liking it?

  3. Oliver Sumpton
    Posted October 20, 2009 at 12:23 pm | Permalink

    check out cufon :)

    http://wiki.github.com/sorccu/cufon/about

  4. Matt
    Posted October 20, 2009 at 6:42 pm | Permalink

    @Oliver I’ve seen Cufon, but using native fonts via @font-face is superior in every way. Cufon is a (brilliant) hack that loses its utility with the arrival of proper font embedding.

  5. Christopher Boone
    Posted November 22, 2009 at 11:06 pm | Permalink

    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.

  6. Matt
    Posted November 23, 2009 at 8:58 am | Permalink

    @Christopher Quite right you are, just haven’t gotten around to it - I implemented @font-face before 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. :)

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*