There’s an old saying: “It took me ten years to be an overnight success.” We’ve been waiting for web fonts for at least a decade, and 2010 will finally be the year that web fonts go mainstream.
This is in no small part to the work both Typekit and Google have been doing. Today they both announced some very cool things in this area.
First up, Google announced that they are releasing high quality open source fonts in the Google Font Directory. Since these are open source you can even download the original font files yourself at the font code.google.com project.
Next, Google has made it very easy to include these fonts into your page using the new Google Font API. To use a font you simply drop some HTML into your page similar to the following, specifying the font you want to use:
HTML:
<link href=‘http://fonts.googleapis.com/css?family=Tangerine’
rel=‘stylesheet’
type=‘text/css’>
body { font-family: ‘Tangerine’, serif; }
Doesn’t get simpler than that. The new API does alot of things for you behind the scenes:
Google’s serving infrastructure takes care of converting the font into a format compatible with any modern browser (including Internet Explorer 6 and up), sends just the styles and weights you select, and the font files and CSS are tuned and optimized for web serving. For example, cache headers are set to maximize the likelihood that the fonts will be served from the browser’s cache with no need for a network roundtrip, even when the same font is linked from different websites.
These fonts also work well with CSS3 and HTML5 styling, including drop shadows, rotation, etc. In addition, selecting these fonts in your CSS works just the same as for locally installed fonts, facilitating clean separation of content and presentation.
On a related front, Typekit and Google announced a new Web Font Loader that smooths over many of the differences around loading web fonts on a page:
The WebFont Loader puts the developer in control of how web fonts are handled by various browsers. The API fires JavaScript events at certain points, for example when the web font completes downloading. With these events, developers can control how web fonts behave on a site so that they download consistently across all browsers. In addition, developers can set the fallback font’s size to more closely match the web font, so content doesn’t reflow after loading.
Furthermore, the WebFont Loader is designed to make it easy to switch between different providers of web fonts, including Google, Typekit, and others. The code is modular, and we expect to add modules for other major web font providers in coming weeks.
It’s great to see Typekit involved in this; they are a real pioneer in this area and have helped make fonts on the web a reality.
To see all these pieces together navigate over to Smashing Magazine which relaunched their site using these technologies.
Congrats to the Google Web Fonts and Themes team, including Raph Levien, Jeremie Lenfant-Engelmann, Marc Tobias Kunisch, Meslissa Louie, and David Kuettel.
[Disclosure: I work for Google and know the Web Fonts team. However, even if I didn't, I would still be excited about this since I've been waiting for web fonts to happen since the 90s!]
Continue reading »
