by Kyle Weems 21.July 2008 08:03
The new Batman movie, Dark Knight, clocks in at about two and a half hours. This is not an insignificant investment of time. I tell you this because I'm going to recommend that you go view it, and you might want to spare your bladder by not acquiring the theater's sixty-four ounce soda to enjoy while watching the movie. One of the characters in the film is DA Harvey Dent, who most Batman fans will know is fated to eventually become the villanous Two-Face.
The CSS rule @font-face, like Two-Face, has a good side and a bad side, and to a lot of people it's a coin toss as to which side is going to win out. The rule presents a lot of potential for embedding fonts on web pages, allowing page authors to include more than the small subset of "web safe fonts" to be used as text without the need to be converted into a space-wasting, time-consuming, non-dynamic graphic. Furthermore, it will be faster and smoother than current bandaid measures like sIFR (which is a wonderful make-do measure, but hardly a permanent solution).
However, there's a lot of current and future problems with the rule. First, it's currently only implemented in Safari and (surprise!) Internet Explorer. And of course, they're using it differently. Firefox will support the feature with version 3.1, and Opera's announced that it'll be supporting it in the near future, but there's a lot of controversy on whether the rule will even be genuinely usable due to a number of copyright issues that could be spawned by developers making the fonts inadvertantly accessible for download.
Despite these pitfalls, I'm hopeful that @font-face will help usher in an era of web pages that don't all use Verdana, Georgia, or Helvetica as their base fonts, and where every exotic font header is an image.
Unlike the controversy, using @font-face is simple enough, as I'll show below. (Disclaimer: The following examples make use of the font "Feast of Flesh" from http://www.blambot.com/, a source of free and professional fonts, and are copyrighted by Nate Piekos. The free fonts, like Feast of Flesh, are free to use for non-proft use or independant comics only.)
Before a font can be used by CSS, the font needs to be declared via @font-face as follows:
@font-face { font-family: font-name-goes-here; src: url(url-goes-here) format("truetype");}
After this is done, you can then give any element the font lie so: E {font-family: font-name-goes-here;}, with E representing the selector and font-name-goes-here matching the name you declared for the font in the @font-face rule. Here is an example of this rule in effect (as of the time of this writing this example is only viewable in Safari unless of course you've got it installed on your computer).
Internet Explorer also uses @font-face (in fact, it had it well before Safari), but as of IE7 doesn't use True Type Fonts like Safari does (and presumedly Firefox and Opera will). There's some hope that IE8 will switch to TTF, but for now Internet Explorer is instead using the misleadingly named Embedded Open Type fonts. Does this mean that we can't get IE to use our beautiful TTF fonts?
Not quite.
Although it's not exactly user friendly, Microsoft has provided a TTF > EOF converter, called WEFT. There's a tutorial for it here, which is significantly more useful than the 'wizard' that allegedly helps you through the program. Once you've had the font converted to EOF format, you can then link to it in a style almost identical to that used by Safari:
@font-face { font-family: font-name-goes-here; src: url(url-goes-here); }
The only real change is the lack of the format part of the src property. Making use of the font after it's been linked is identical to the method used by Safari. Here's an example of a page that's been prepared with both font methods, and therefore the font works for both Safari and Internet Explorer.
@font-face is certainly going to help spice up websites in the near future, but I think the jury is still out as to how much and how often, due to a number of copyright issues with fonts. Perhaps techniques can be developed to somehow protect the TTF files while still letting them be used by the font-face rule. Regardless, can we please see less of Helvetica?