Basics of using font on the web
Browser support
- IE6-8 only supports TTF (true type fonts) packaged as EOT (Embedded open type)
- IE9+ supports WOFF
- Opera 10+ supports TTF, OTF (open type fonts) and SVG (scalable vector graphics)
- Google Chrome supports TTF and OTF. Version 6 onwards also supports WOFF
- Safari supports TTF and OTF
- Mozilla/FireFox since 3.5 supports TTF and OTF. Version 3.6+ supports WOFF
What is @font-face and why do we use it?
@font-face is one of the most robust and widely used methods of using non-standard system fonts on the web. A couple of reasons for this are due to the ease of implementation, it’s compatibility across browsers and the fact that it does not rely on the use of JavaScript or image replacement.
@font-face was initially proposed for CSS2 and is part of the CSS3 Working Draft
@font-face is also free and based on these reasons it is my preferred option ahead of tools such as Cufon and Typekit.
There a couple of generators available to zip your font into a WOFF or EOT package. The most widely used is Font Squirrel
WOFF, the new way forward
WOFF is very similar to EOT, it is not a font format in itself, instead it is a packaged font file. With every major browser supporting WOFF, and its inclusion within the W3C Working Draft on July 27th 2010, it will soon become the standard transport format for fonts.