With the recent push for HTML5 & CSS3 support amongst the popular browsers, we can be assured that @font-face is here for the long haul. @font-face allows us to push aside the notion that only a handful of "web-safe" fonts are to be used, and instead allows us to use almost any typeface we see fit for a design.
I say almost because there are quirks and limitations to be aware of.
Choosing a typeface
This is where the excitement of choosing from a million typefaces begins to fade. Assuming that any designer worth his weight will steer clear of undesirable fonts essentially every single one that is found in a package consisting of "1001 Amazing Fonts!" we can focus on the smaller issues.
Much like layouts tend to vary slightly between the browser/operating system combinations, the way the typeface displays will also differ. While OSX has excellent text anti-aliasing, Windows has a hard time rendering complex typefaces at smaller point sizes.
These rendering discrepancies have a lot to do with the hinting that is applied to type faces. Hinting allows for screen text to be displayed at lower sizes without the loss of legibility. OSX completely disregards the hinting attached to the typeface, while Microsoft continues to use light hinting. I've also found that working with TrueType formats instead of OpenType results in better hinting.
Long story short, it's not necessarily the typeface causing distortion at smaller sizes, its likely the OS.
Browser support
The biggest inconvenience of going with @font-face is making sure to convert the font files to appropriate formats that will work in various browsers. The shortlist of supported formats goes as follows:
- Firefox 3.5+ â TTF, OTF, WOFF
- Chrome 2.0+ â TTF, SVG
- Safari 3.1+ â TTF, OTF, SVG
- IE 4+ â EOT
- Mobile Safari (iPhone, iPod, iPad) â SVG
There is some talk of having a unified format for web type, but with the way browsers cooperate, that may take 10+ years of arguing to get anywhere. That leaves us with having to work with three encompassing formats: TTF, SVG, and EOT.
More details on all the available formats can be found here.
Available tools
If you roll your eyes at the list of formats much like we do here at Fuse, you will be happy to know that there is a good number of online tools to make your life much easier.
Font Squirrel is one of the biggest reasons we are even comfortable with taking the @font-face route. In addition to their @font-face generator, which makes the process of converting your TTF file to SVG & EOT as easy as clicking a checkbox, they offer up a large number of properly licensed free-use @font-face kits.
Google also jumped on board with the Google Font Directory. They offer up hosted versions of a "somewhat small" collection of free-use kits. With Google backing this, you know that the list of available fonts will continue to grow.
There is also a number of services out there that allow you to purchase web-use licenses for various commercial fonts. I won't get into those because the pricing structures vary widely, and that market has yet to settle on something reasonable.
There is also a Drupal module by the name of @font-your-face that looks to even further simplify things by pulling in various sources and allowing font management from a "simple click-to-enable interface". We're looking to give this module a run through, so stay tuned for a follow-up blog post.
Conclusion
While @font-face is a wonderful addition to a designer/developer's toolset, it doesn't come without its hurdles and I haven't even touched on potential licensing headaches. Even though there are tools to make your transition somewhat painless, I would still recommend keeping those web-safe fonts within reach just in case things don't pan out for a particular project.