Two years of blood, sweat, and bezier curves. That’s what it takes to make your average font family. Two years of painstaking work in an under-appreciated and underpaid industry. Too many years to watch your pockets picked by an internet culture of open source, free distribution. It’s no surprise that @font-face scares the bejesus out of type designers. As a result, progress has been slow and attitudes more cautious about embedded type.
@font-face is a CSS rule pointing to server side font files. Instead of relying on system fonts, designers use whatever font they choose.
To the web designer, it means getting the desired look while saving hours that would have been spent setting up hacks and workarounds. To a type designer, it’s like handing your keys to a perfect stranger and hoping they won’t rob you blind.
Microsoft has supported web embedding fonts ever since IE 4. Like everything with Microsoft, it’s not that simple. The more secure EOT (Embedded OpenType) format was being developed, but never really took off. The added complexity of creating an EOT file required a special tool (WEFT). It was a valiant effort to obscure font data and add a level of security. Many are still unconvinced, and wait for a better non-proprietary format. Until that time, the traditional TTF (TrueType Font) format and the newer OTF (OpenType Font) formats will not work in Internet Explorer.
Internet Explorers (6,7,8) make up around 40% of users, which means an alternate set of fonts and @font-face declarations, or you’ll be falling back to the font stack like usual.
@font-face {
font-family: MyFont;
src: url(MyFont.ttf);
}
body {
font-family: MyFont, sans-serif;
}
All major font foundries now append their End User Licensing Agreements to restrict web embedding. Nearly all commercial-use licenses do NOT give you @font-face permissions. From listening to the TypeCon 2009 Web Fonts Panel there appears to be a growing consensus that embedded opentype will emerge as the future of type on the web.
4 Responses to 10 Years Later: The Current State of @font-face
nice clean overview. Thanks for sharing !
I’m currently using Typekit
Hey George
We’ve been using TypeKit lately as well. It’s pretty great and seems to work nicely in all browsers that we have found (eg. IE 6–8, FireFox, etc.).
Trackbacks/Pingbacks