Some facts about web fonts
Web fonts are evolving so quickly, it’s easy to get confused by the technology and terminology involved. Here are a few facts to help clarify.
- CSS @font-face has been a web standard for over ten years.
- Browser support varies, regarding font formats (and other issues like type rendering).
- Font files have many different extensions, like .ttf, .otf, .eot, .svg, and .woff, the emerging web standard for type.
- Here’s some code to orchestrate those various files in a bulletproof way, a la Paul Irish.
- Font Squirrel’s @font-face generator writes code so you don’t have to, and provides typefaces in various formats for browser support.
- Typekit also writes code so you don’t have to, and also provides typefaces in various formats for browser support. But when browsers or best practices for @font-face syntax change, Typekit takes care of that.
I often see folks asking, “What’s the difference between Typekit and @font-face?” The difference is this: CSS @font-face is a web standard that, right now, is hard to implement reliably; Typekit serves fonts via CSS using @font-face, and makes it reliable and easy. The code served by Typekit is standards-compliant, and is updated automatically for you as often as browsers and web standards change.