Two years of blood, sweat, and bezier curves. That’s what it takes to make your aver­age font fam­ily. Two years of painstak­ing work in an under-appreciated and under­paid indus­try. Too many years to watch your pock­ets picked by an inter­net cul­ture of open source, free dis­tri­b­u­tion. It’s no sur­prise that @font-face scares the beje­sus out of type design­ers. As a result, progress has been slow and atti­tudes more cau­tious about embed­ded type.

What is @font-face?

@font-face is a CSS rule point­ing to server side font files. Instead of rely­ing on sys­tem fonts, design­ers use what­ever font they choose.

To the web designer, it means get­ting the desired look while sav­ing hours that would have been spent set­ting up hacks and workarounds. To a type designer, it’s like hand­ing your keys to a per­fect stranger and hop­ing they won’t rob you blind.

Where will @font-face work?

• Safari 3.1
• Fire­fox 3.5
• Opera 10

What about Inter­net Explorer?

Microsoft has sup­ported web embed­ding fonts ever since IE 4. Like every­thing with Microsoft, it’s not that sim­ple. The more secure EOT (Embed­ded Open­Type) for­mat was being devel­oped, but never really took off. The added com­plex­ity of cre­at­ing an EOT file required a spe­cial tool (WEFT). It was a valiant effort to obscure font data and add a level of secu­rity. Many are still uncon­vinced, and wait for a bet­ter non-proprietary for­mat. Until that time, the tra­di­tional TTF (True­Type Font) for­mat and the newer OTF (Open­Type Font) for­mats will not work in Inter­net Explorer.

Inter­net Explor­ers (6,7,8) make up around 40% of users, which means an alter­nate set of fonts and @font-face dec­la­ra­tions, or you’ll be falling back to the font stack like usual.

How do you use @font-face?

1. Copy font file to your server
2. Define @font-face in CSS
3. Declare font in CSS

@font-face {
  font-family: MyFont;
  src: url(MyFont.ttf);
}

body {
  font-family: MyFont, sans-serif;
}

What about legal issues?

All major font foundries now append their End User Licens­ing Agree­ments to restrict web embed­ding. Nearly all commercial-use licenses do NOT give you @font-face per­mis­sions. From lis­ten­ing to the Type­Con 2009 Web Fonts Panel there appears to be a grow­ing con­sen­sus that embed­ded open­type will emerge as the future of type on the web.