That Delicious @font-face

As of a cou­ple of min­utes ago, this site has rel­e­gat­ed the ven­er­a­ble sIFR to the dust­bin of his­to­ry, opt­ing instead for the bright future of true cus­tom fonts using the @font-face CSS dec­la­ra­tion that has been around since 1998.

font-face-vs-sifr2

Why it took so long for cus­tom web fonts to become an in-brows­er real­i­ty is a tan­gled tale involv­ing brows­er wars, font foundry fears and a gen­er­al iner­tia of rest. Many thorny licens­ing issues remain regard­ing the use of com­mer­cial fonts on the web, which is why there’s been a pro­lif­er­a­tion of third-par­ty solu­tions such as Type­Kit, Font­deck and Kernest crop­ping up.

But there are also headache-free choic­es such as the excel­lent free fonts from Jos Buiv­en­ga’s exljbris Font Foundry. Since Jos explic­it­ly allows @font-face embed­ding, this site uses his excel­lent Deli­cious font for menus and head­ings, and will run smoother and faster than ever thanks to ditch­ing sIFR’s Flash dependency.

Not all is sun­shine and ros­es. The iPhone ver­sion of Safari has dis­abled @font-face link­ing for some rea­son unknown to me. IE has its own pro­pri­etary for­mat that involves acronyms like EOT and WEFT, along­side a high prob­a­bil­i­ty of ani­mal sac­ri­fice to appease the demons who designed WEFT. But there is a light at the end of tun­nel, 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 read­ing about this in my copy of Hand­craft­ed CSS by Dan Ceder­holm. I had read snip­pets of it on the web but nev­er 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 debat­ing pick­ing that book up. Are you lik­ing 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

    @Oliv­er I’ve seen Cufon, but using native fonts via @font-face is supe­ri­or in every way. Cufon is a (bril­liant) hack that los­es its util­i­ty with the arrival of prop­er font embedding.

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

    Yeah, @font-face is won­der­ful, isn’t it?

    Quick note: You should be able to get your type­faces work­ing on Mobile Webkit if you pro­vide SVG font files.

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

    @Christo­pher Quite right you are, just haven’t got­ten around to it — I imple­ment­ed @font-face before the knowl­edge about SVG fonts for mobile WebKit and Chrome start­ed mak­ing the rounds.

    Oh, and love that you’re using IM Fell on your blog. Lovely. 🙂