Wednesday, May 19th, 2010

2010: Web Fonts Are Here and Ready to Use

Category: Announcements, Font, Framework, Google, Typography

<p>
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:

  1. <link href='http://fonts.googleapis.com/css?family=Tangerine'
  2.      rel='stylesheet'
  3.      type='text/css'>
  4.  
  5. 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!]

Related Content:

  • Here comes LTO-5 tape technology, ready or not
    Even with a slow economy and adoption of LTO-4 by no means complete, the LTO Consortium is gearing up to offer LTO-5, which is slated for release in...
  • 4Gb--ready or not, here it comes
    You might not need them, but 4Gb/sec Fibre Channel products are coming. Comparably priced to 2Gb/sec and backward compatible, they might end up in...
  • SMS phishing is here
    Phishing attacks are no longer limited to email. Recently, researchers uncovered phishing scams using SMS, and mobile experts say enterprises should...
  • SMS phishing is here
    Phishing attacks are no longer limited to email. Recently, researchers uncovered phishing scams using SMS, and mobile experts say enterprises should...
  • SMS phishing is here
    Phishing attacks are no longer limited to email. Recently, researchers uncovered phishing scams using SMS, and mobile experts say enterprises should...

Posted by Brad Neuberg at 1:12 pm
21 Comments

++---
2.5 rating from 2 votes

21 Comments »

Comments feed TrackBack URI

My firefox must be broken or I didn’t understand how it works…

Comment by emailandthings — May 19, 2010

GREAT. Just great. Now they’ll have to add dozens more fonts or we’ll see the same 18 fonts on every website… =P

Comment by bfred — May 19, 2010

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?

Comment by okonomiyaki3000 — May 19, 2010

How do these fonts work for users (visitors) who have javascript turned off?

Comment by katiebird — May 19, 2010

Hope there are solutions for Chinese fonts.

Comment by arphen — May 19, 2010

AWESOME!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Comment by sfaok — May 19, 2010

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.

Comment by joolss — May 19, 2010

@katiebird Only the font loader requires javascript, the API is just a link to a stylesheet.

Comment by MattCoz — May 20, 2010

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.

Comment by pmontrasio — May 20, 2010

Cool! Now that’s a good news!

Comment by stoimen — May 20, 2010

I’m very sorry to be childish, but the TypeKit logo just looks like a childish drawing of a penis, dangling down.

Comment by CliveDangerous — May 20, 2010

How about http://www.fontsquirrel.com/ and http://www.fontspring.com/?

Comment by MartijnHoutman — May 20, 2010

“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…

Comment by bruxia — May 20, 2010

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.

Comment by sixtyseconds — May 20, 2010

Grumbles of this not looking so hot in Windows:

http://typophile.com/node/70557#comment-412118

Comment by jimhead — May 20, 2010

Does this api and the font directory support IE? I only see stuff talking about CSS3 fonts. If not, fail.

Comment by JonBad — May 20, 2010

@jonbad – both the Google API and my PHP 5 lib support ie6 (through eot font files).

Comment by sixtyseconds — May 20, 2010

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.

Comment by vjvirus — May 21, 2010

Really cool. Now I can use JavaScript to inject fancy fonts in Google Wave. :-)

Comment by learnr — May 21, 2010

Great Job! Love it :) This is a nice progression to see.

Comment by Pixelmount — May 22, 2010

@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.

Comment by RichardDavies — May 26, 2010

Leave a comment

You must be logged in to post a comment.