Wednesday, May 19th, 2010
2010: Web Fonts Are Here and Ready to Use
Category: Announcements, Font
, Framework
, Google
, Typography
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:
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!]
Related Content:
- Properties in VB.NET
Properties abstract the data from being manipulated directly by the client. Furthermore, properties also facilitate the defining of actions and data... - A simple console application
This code demonstrates the use of Function OverLoading, which can prove quite handy when designing commercial and enterprise... - dynamic fonts
Dynamic fonts are a feature of Netscape's Communicator suite of products that enables a Web page designer to specify or create a special font style... - Simple Web Agent To Display View Data Dynamically
Rate the above post
My firefox must be broken or I didn’t understand how it works…
GREAT. Just great. Now they’ll have to add dozens more fonts or we’ll see the same 18 fonts on every website… =P
Of all the next generation tools for web developers and designers, fonts are by far the least interesting to me. Some of them look great and they will bring some much needed variety but, as I mostly develop Asian language sites, I have almost no use for them. What is the font solution for languages with thousands of glyphs?
How do these fonts work for users (visitors) who have javascript turned off?
Hope there are solutions for Chinese fonts.
AWESOME!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
This rocks! But better still, is the fact that Monotype opens a Typekit-like service for its fonts: http://webfonts.fonts.com . This makes a HUGHE difference for company websites that relies on commercial fonts (Monotype owns or controls the big fonts like Helvetica, Futura, Bodoni etc.) Although I believe the final hurdle is over when Opera and the Webkits support WOFF.
@katiebird Only the font loader requires javascript, the API is just a link to a stylesheet.
If you go to http://typekit.com/ with JavaScript turned off you can’t see the “The easiest way to use Real Fonts on your website” message. The behaviour is similar to having the message embedded in a Flash movie. This can’t be the right way to do it.
Cool! Now that’s a good news!
I’m very sorry to be childish, but the TypeKit logo just looks like a childish drawing of a penis, dangling down.
How about http://www.fontsquirrel.com/ and http://www.fontspring.com/?
“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.”
and nothing to do with the fact that MS allowed you to do this 12 years ago…
For those of you curious enough, I have cloned this functionality in a PHP lib that you can host on your own server, and from which you can load your own fonts. http://bit.ly/aKaCjp
It still needs a bit of love, so feel free to fork and contribute.
Grumbles of this not looking so hot in Windows:
http://typophile.com/node/70557#comment-412118
Does this api and the font directory support IE? I only see stuff talking about CSS3 fonts. If not, fail.
@jonbad – both the Google API and my PHP 5 lib support ie6 (through eot font files).
Doesn’t google now get to see all my web traffic and feed on it? Or it is allowed for 3rd party to host the fonts too? I did not read the entire license but if anyone can shed light that will be cool.
Really cool. Now I can use JavaScript to inject fancy fonts in Google Wave. :-)
Great Job! Love it :) This is a nice progression to see.
@pmontrasio Web fonts (incl. Google Fonts and Typekit) don’t require JavaScript to display properly. The main banner on the Typekit homepage doesn’t work with JavaScript disabled because (I’m guessing) they’re using JavaScript to dynamically select a different typeface each time the page is displayed. Their font gallery (http://typekit.com/gallery) works just fine with JavaScript disabled.