July 16, 2009

Control your web-pages’ typography with @font-face

Filed under: Blog — krkhan @ 11:47 pm

One of the most common mistakes a n00b web-designer makes — and one that took me a long time to figure out back when I started — is to assume that the way their shiny web-pages look in the WYSIWYG editors is actually the way how they’ll be presented to all variety of end-users. That crazy gothic font can totally get you hawt on FrontPage, but to say that it would look crippled on most of your visitors’ screens would probably be an understatement.

The CSS @font-face feature debuted a little while ago to rectify the font mess. To put it simply, it allows authors to “embed” fonts on their web-pages. And I’m a bit late on this, but it has found its way into the newest release of Firefox as well. The example rendered perfectly on version 3.5 using the new font, raising a few points in my head:

  • The rule certainly has considerable space for abuse. But then, which technology on web doesn’t?
  • For the paranoid, Firefox does provide the gfx.downloadable_fonts.enabled in about:config to turn the feature off.
  • Out of curiosity, I checked out IE’s status on @font-face support. Turns out that it also supports font-embedding, albeit using an obscure format called EOT which is basically what one would label as “DRM for fonts“. How surprising.
  • Prior to downloading the new fonts, the demo page gracefully degraded to stock ones.

In a nutshell, intriguing at worst and exciting at best. Also, it’s nice to see that IE 6’s death is prompting a steady progress in CSS and HTML. About time as well.

Tags: , , , ,

No Comments

No comments yet.

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.