Control your web-pages’ typography with @font-face
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.
@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
about:configto turn the feature off.
- Out of curiosity, I checked out IE’s status on
@font-facesupport. 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: CSS, Firefox, Internet Explorer, Technology, Web