Web fonts – a brief introduction
on August 30, 2010When it comes to web design, most people assume that this discipline is all about neat graphics and pixel-pushing, but they truly forget that more then 90% of the information on the web is written language and thus Typography. One problem we web designers faced for the last decade, is that we only can refer to a handful of web save fonts (fonts pre-installed on our OS) such as: Arial, Helvetica, Times New Roman, Times, Courier New and Courier – plus a few more options that work cross-platform. In short, we have been limited in our creative impulse to provide the end-user with nicer looking fonts for far too long.
Back in 1998, when The CSS2 specification was released, the CSS rule @font-face was introduced to make it easier for us to use none web save fonts. The browser would simply download the font from the server – if its not installed on the clients computer – and embed it on the website. This was removed in the CSS2.1 specification because it literally enabled illegal downloading of licensed fonts, which of course is not in the very best of interest of the font creators.
Microsoft started supporting font embedding through the proprietary Embedded OpenType (.eot) standard since version 4.0, as an attempt to protect licensed fonts from illegal downloading. However Internet Explorer only supports .eot file format for embedding fonts which again gives us web designers more work to take care of. If you want your none web save font to be displayed on IE browsers, then you will need to convert it first to an .eot file format. *sigh
Generally speaking: Modern browsers support @font-face embedding and this is clearly on the rise! Tho I will mention shortly the methods we web designers still use as work-around until @font-face is widely implemented:
- Font fallback – a common practice, simply choose a ‘look-a-like’ font
- Image replacement – overlaying your text with an image containing the text content in the font of your choice.
- sIFR (Scalable Inman Flash Replacement) – is a flash based alternative. tho its slow and you need to have flash and javascript enabled.
- Cufon – uses vml for ie browser and html5 canvas for modern browsers. Tho it embeds the fonts, thus violates the copyrights.
These methods are all still in use and well know techniques and yet just alternatives! But lets move on, I want to show you how the CSS declaration of the @font-face looks like:
@font-face {
font-family: "Your typefacename";
src: url("type/filename.eot"); //IE
src: local("☺"), //IE hack not to choke and die
url("type/filename.woff") format("woff"),
url("type/filename.otf") format("opentype"),
url("type/filename.svg#filename") format("svg");
}
Maybe you are wondering why this code looks a little bulky, eh ? Well its because we want to cover all browsers to display our acquired font and to avoid gaps! And as you remember from above, IE for example only supports .eot (this will change with IE9). All other modern browsers support the use of .ttf (trueType font) and .oft(openType font) file format, as well the .svg (Scalable Vector Graphics) and .woff (Web Open Font Format).
Conclusion
I really think that the future belongs to @font-face, its plain, simple & pure CSS code, plus we are not dependent on javascript or flash, which keeps the implementation time in check and saves us from other headaches.
