CSS2 @font-face threatens to make our pages prettier

It’s funny the way the universe echos sometimes. While I was walking to lunch yesterday I was thinking that it was high time developers got more choice about the fonts that their webpages display in. I mean we live in an age where bandwidth restrictions have relaxed so much there’s video linked from the homepage of the BBC news site, yet if you want to specify text fonts that’ll work on most window browsers there’s about 12 you can choose from. If you actually want your text to look similiar on browsers over different OSes suddenly you’re choosing vague “fonts” like “serif”, “sans-serif” and “fantasy”.

For ages the only real solution has been text displayed as graphics which is painful to maintain and inaccessible if you don’t keep your alt attributes up to date. However today I came across a link to a slightly more elegant solution that uses flash, the DOM and javascript to provide your desired typeface to the 90% of people whose browser can support it and plain text to everyone else.

And that got me thinking.. shouldn’t this be something that’s included in the CSS standard? And I did a bit of digging and it turns out that it is.

I cynically dismissed all this as too new and too cool to actually have any browser support and after half an hour of experimenting it seems it is. It seems IE supports something like this, but the fonts have to be in some special format.

This is the stylesheet code I used:

  1. @font-face {
  2.   font-family: "Handage AOE Bold";
  3.   src: url(http://webdev.helephant.com/samples/handage.ttf) format("truetype");
  4. }
  5. H1 {  font-family: "Handage AOE Bold", serif}

Oh well, it’ll be cool in the future when it’s supported widely.. I guess IE4+ support for the EOT format *is* probably 95% of the visitors to most websites anyway. And it gave me a good excuse to go visit my favourite quirky font site.

I have to stop being disappointed that web standards implementation doesn’t keep up with my enthusiasm for niftiness. Maybe one day I’ll try something in the standard that sounds cool and it’ll be such a pleasant surprise that it actually works in both IE and Firefox. ;)

Posted on 16 Sep 04 by Helen Emerson (last updated on 16 Sep 04).
Filed under CSS