Web fonts: Catch The Wave
Google’s Font API and Font Directory should tip the balance for many web developers who are considering custom fonts. Designer fonts are one more in the long list of services available from Google’s giant cloud.
The @font-face tag reintroduced in the Cascading Style Sheet (CSS) 3 standard allows developers to link to font files, making custom fonts on the web much more practical. The font-as-service model enabled by the @font-face tag really simplifies things.
Services like Typekit provide remotely-hosted font files, streamlined licensing and easy-to-use font generators. And, best of all for many developers, they handle cross-browser compatibility for you.
Google brings to the table an all-open-source font library and a simple HTML option for embedding fonts in your webpages. Google also offers a JavaScript option developed with Typekit.
Here’s a list of font services:
- Fontdeck
- Fonts.com
- Fonts Live
- Font Squirrel
- Google Font API
- Just Another Foundry
- Kernest
- Typekit
- WebINK
Okay, so now you’re ready to go wild with designer fonts. Before you cut loose there are a few things to consider.
One of the biggest annoyances of Web fonts is the Flash of Unstyled Text (FOUT). This is the phenomenon of browsers loading pages using plain fonts and then an instant or two later adding the custom fonts. Browsers render content first, then style sheets, and last, external font files. Given the vagaries of the Internet, FOUT can range from barely noticeable to several seconds.
Webmonkey describes some techniques for minimizing FOUT. Also, make sure to have a good fallback by keeping your choice of traditional fonts specified in your CSS.
For those interested in downloading and hosting their own custom fonts, Paul Irish documents a bunch of issues.
And with great font freedom comes great typographic responsibility. Designer fonts can hurt your image rather than help it if you choose the wrong ones or use too many. Here are a couple of typography guides: Creating graphically effective form design – Part 2: Typography and On Web Typography. Tim Brown’s tool, Web Font Specimen, lets you preview Web fonts. His Web font how-to guide covers the tool.
