Want to start using web fonts, but you’re not really sold on the benefits? Head over to FontFonter, a neat little tool that lets you try web fonts on any website out there. I did the deed on Webmonkey in the screenshot — as you can see, the headline and the post body text are now styled in beautiful Meta.
It was created by Tim Ahrens and the folks at FontShop, a font foundry and storefront that’s also providing simple fonts optimized for use on the web, plus the tools to implement them. Check out their collection of Web FontFonts you can include in your designs.
Google has announced a new Font API and a collection of free, open source fonts anyone can use in their site designs for free. The Google Font API allows you to embed any of the new Google fonts on your website using CSS.
The fonts themselves are quite nice, with a range of script, serif, sans-serif and monospace typefaces. They can all be used to style text via @font-face. There are only eighteen fonts available — so there’s probably no need for Typekit to worry that Google is muscling in on its territory.
Even though things have been progressing quickly in the world of type on the web, with advancements in CSS, HTML5 and the rise of services like Typekit, inconsistencies in browser support and implementation have stopped some from making the move to web fonts. The new WebFont Loader gives hope to those still on the fence by providing a consistent way to handle what the browser does while the fonts are being loaded.
Veen also praises Google’s decision to keep its work open source and free.
“Getting fonts technically ready for web use is a lot of work, and using the open source model allows anyone to contribute their expertise to a core set of fonts.” he says.
You can use WebFont Loader with fonts on your own server, with links to the just-announced Google Webfont API, or with your Typekit account.
As for Google’s new Font API, well, it’s so simple its hardly an API. You just need to add a link to Google’s stylesheet in the head tags of your page and then apply that font to some element in your page.
The syntax looks like this:
Then, in your stylesheet, you can apply that font to any body element. For example:
font-family: 'Font Name', serif;
Google’s new Font API will work in any browser that supports @font-face (which is pretty much all of them). If the Google fonts happen to strike your fancy, the API is certainly easy to use. If you’re looking for a broader selection, check out Typekit.
Typekit offers Google’s new open source fonts, Veen says, but Typekit also offers access to a library of over 4,000 commercial fonts of professional quality. Typekit is currently the only source offering these high-quality typefaces for legal use on the web.
Disclosure: Jeff Veen is a former Webmonkey editor and a former Wired.com employee.
The use of custom fonts on the web is finally a viable option for designers.
Browser support for CSS’s @font-face rule is pretty solid — even IE 5 can be wrangled into displaying custom fonts loaded from your server. Services like Typekit, which licenses fonts from well-known font foundries, and free services like Font Squirrel are helping to smooth the licensing issues surrounding custom fonts on the web.
However, while browser support and licensing is getting sorted quickly, there’s still one big problem with web fonts — the dreaded “Flash of Unstyled Text,” or FOUT.
The problem (despite the name, it has nothing to do with Adobe Flash) stems from how browsers render a page: progressively, prioritizing the raw content, then grabbing the stylesheet and then grabbing any external font files. The actual FOUT effect can be seen in the wild, but it varies by browser.
Internet Explorer will load the font file as soon as it encounters the @font-face in your CSS, which minimizes FOUT. However, make sure to put your @font-face declaration above any script tags, otherwise IE will hold the entire page until the font loads.
Safari and Chrome (and other WebKit browsers) hide any text styled with @font-face until the font is fully loaded. This means your styled text content is invisible at first, and then pops onto the screen later, after the font file loads.
Firefox loads all your text normally and displays it using a fallback font. Then, a half-second or so later, that text is “upgraded” when the custom font data is loaded. The result is a jarring font change, much like older, Flash-based font solutions. Mozilla is currently treating this behavior as a bug in Firefox. Mozilla plans to adopt the WebKit-style rendering in the future.
Obviously none of these cases is ideal, and the little loading hiccup, no matter what form it manifests itself in, is noticeable even to the most oblivious of web users.
FOUT sucks. So, what do you do? There are a variety of techniques that can be used to minimize — and even eliminate — the FOUT.
An outline font supplies a geometrical description of each character so that the font can be rendered in a variety of sizes. Since they are scalable, outline fonts can make the most of an output device’s resolution. The greater the resolution of the monitor, the sharper the characters will look. Popular languages for defining outline fonts are PostScript and TrueType.
A monospace font, such as Courier, is one in which every character takes up the same amount of horizontal space.
Thus a thin “i” in a monospace font would have the same width, or pitch, as a fat “w.” A font in which an “i” is relatively thinner than a “w” would be a proportional pitch font, such as Times. Pitch is usually expressed as the number of characters printed per inch. Common pitch values are 10 and 12. Because monospace fonts have constant widths, they are often used to align tabular data into columns.