Google, Typekit Join Up to Improve Web Fonts

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.

In fact, Typekit has partnered with Google to announce WebFont Loader, a JavaScript library for improving the web font experience. Typekit will also be adding Google’s new free fonts to its collection, so there’s clearly still a lot of love there.

The WebFont Loader is an open source library of scripts that Typekit developed to help eliminate the “flash of unstyled text” page load hiccup that we’ve mentioned before. The WebFont Loader offers a number of JavaScript events which allow developers more control over when their fonts load.

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.

“The WebFont Loader does for @font-face what jQuery has done for JavaScript,” says Typekit co-founder Jeffrey Veen in an e-mail to Webmonkey. “For people who really care about about the speed and user experience of their web pages, the WebFont Library gives them much more control. It essentially moves us a big step forward in the evolution of fonts on the web.”

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:

h1 {
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.

Here’s The Thing With Ad Blockers

We get it: Ads aren’t what you’re here for. But ads help us keep the lights on. So, add us to your ad blocker’s whitelist or pay $1 per week for an ad-free version of WIRED. Either way, you are supporting our journalism. We’d really appreciate it.