Last week I discussed a free, open source solution to rendering text on Web pages in the font the designer selects. This solution, called, Cufon, works well but it has its limitations particularly if you are a typography junkie because it doesn’t support font hinting, which is (according to Wikipedia), “the use of mathematical instructions to adjust the display of an outline font so that it lines up with a rasterized grid.”
While that might not sound like a show stopper it has serious consequences when you have a small font size and or a low screen resolution. Wikipedia comments, “hinting is critical for producing a clear, legible text for human readers.”
An aside: If you want to learn about the intricacies of fonts I highly recommend “The Complete Manual of Typography” by James Felici (Adobe Press, 2003). This is an outstanding introduction to typesetting and font technology and, perhaps not surprisingly, it’s beautifully typeset. Highly recommended.
But wait, that’s not all of the problems … no, another big problem is that Cufon is not based on any kind typeface rendering standards, it is, essentially, a “mash up” of traditional font technology with a number of other technologies including JavaScript and vector markup language.
This means, given that standards for just about everything are still problematic across all of the major browsers, ensuring Cufon works as intended across different browser implementations is complicated.
Finally, there’s the copyright problem: With Cufon, Web designers have to upload and encode the fonts they want to use which potentially leads to all sorts of legal concerns if the designers haven’t secured the correct rights.
To address the first issue, the problem of standards, we now have broad adoption of Cascading Style Sheet version 3 (CSS3) which supports the @font-face mark-up to specify which font and variant to use and where to find it.
As explained on the very useful Web site CSS3.info: “Not exactly a feature which is new to CSS3, @font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5! However, their implementation relied on the proprietary Embedded Open Type (.eot) format, and no other browsers decided to use this format. With the release of Safari 3.1, however, Web site makers can use any licensed TrueType (.ttf) or OpenType (.otf) font in their pages.”
As an example, CSS3.info explains:
… to use both regular and italic forms of Jos Buivenga’s Delicious font, you would put the following in your stylesheet:
@font-face {
font-family: Delicious;
src: url(‘Delicious-Roman.otf’);
}
@font-face {
font-family: Delicious;
font-weight: bold;
src: url(‘Delicious-Bold.otf’);
}
Then call it using font-family:
h3 { font-family: Delicious, sans-serif; }
Of course, things are rarely (if ever) perfect in the world of Web standards. From Paul Irish’s tutorial “[Bulletproof @font-face syntax][http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/]” he recommends the following:
@font-face{
font-family:’Graublau Web’;
src: url(‘GraublauWeb.eot’); /* here you go, IE */
}
@font-face{
font-family:’Graublau Web’;
src: url(//:) format (‘no404’), url(‘GraublauWeb.otf’) format(‘opentype’); /* tricky! */
}
As you can see, we still have to make special allowance for Internet Explorer (“curse you, Microsoft”) but at least we’re using real fonts with hinting.
For a summary of @font-face browser support see “CSS3 Font Face with Bold and Italic/“
The broad adoption of @font-face is a huge step forward for Web design and next week, I’ll discuss commercial services that make using @font-face really simple and effective.
