We've moved! Come visit our new blog:

Blog Archive

Wednesday, May 19, 2010

Introducing the Google Font API & Google Font Directory

Today we are excited to announce a collection of high quality open source web fonts in the Google Font Directory, and the Google Font API to make them available to everybody on the web. For a long time, the web has lagged print and even other electronic media in typographic sophistication. To enjoy the visual richness of diverse fonts, webmasters have resorted to workarounds such as baking text into images. Thanks to browser support for web fonts, this is rapidly changing. Web fonts, enabled by the CSS3 @font-face standard, are hosted in the cloud and sent to browsers as needed.

Google has been working with a number of talented font designers to produce a varied collection of high quality open source fonts for the Google Font Directory. With the Google Font API, using these fonts on your web page is almost as easy as using the standard set of so-called “web-safe” fonts that come installed on most computers.

The Google Font API provides a simple, cross-browser method for using any font in the Google Font Directory on your web page. The fonts have all the advantages of normal text: in addition to being richer visually, text styled in web fonts is still searchable, scales crisply when zoomed, and is accessible to users using screen readers.

Getting started using the Google Font API is easy. Just add a couple lines of HTML:

The Google Font API hides a lot of complexity 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.

The fonts in the Google Font Directory come from a diverse array of designers, including open source developers and highly regarded type designers, and also include the highly acclaimed Droid Sans and Droid Serif fonts, designed by Ascender Corporation as a custom font for Android. We invite you to browse through the directory and get to know the fonts and designers better. Since all the fonts are open source, you can use them any way you like. We also have a separate project hosted on Google Code for downloading the original font files. Since they’re open source, they can be used for just about any purpose, including for print.

We’re hoping designers will contribute many more fonts in coming months to the Google Font Directory. If you’re a designer and are interested in contributing your font, get in touch with us by completing this form.

To showcase the Google Font API, Smashing Magazine has relaunched their site using the open source Droid font hosted by Google. We’re excited about the potential for integrating the Google Font API into many types of publications and web applications. For example, the new themes for Google Spreadsheet forms are a great example of a rich visual experience using web fonts.

This is just the beginning for web fonts. Today, we’re only supporting Western European languages (Latin-1), and we expect to support a number of diverse languages shortly.

@TPReal: thanks, we just noticed that and will fix that asap (I don't have edit access)

@srMatanza: it's using the same rendering as in your browser, so generally yes, antialiased and with subpixel rendering. Many also contain hinting for Windows (but not all, including, somewhat embarrassingly, my own Inconsolata).

Also, the Droid Sans and Droid Serif fonts in the project seem to be missing all the non-Latin-1 characters, making them less than useful for anyone outside of the Americas and western Europe. Are there any plans to create separate subset fonts for the international characters, a la Typekit?

Thanks for all of your hard work, this will be tremendously helpful to the entire web development community! All of our audiences will enjoy using the web a little bit more, whether or not they realize it's because of your hard work.

@Joe: The fonts are downloadable via the Mercurial repository linked in the blog post ("We also have a separate project hosted on Google Code"). They could make it easier to download the entirety of the repository's contents via the web, but still, the original font files are downloadable.

Just put this in a file and open it:<html><head><link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'></head><body style="font-family:'Tangerine';font-size:48pt;">Look ma - no images!</body></html>

Very excited! This is a good step in the right direction. I am in need of a good Block Serif like Rockwell. :) IM Fell will look so good on my site. Will someone please help me incorporate this into my wordpress site? (or make a plugin?)

I think NO BODY should use this api. because there is lot of google that are restricted and are not availableto the end users in iran/cuba/...so if we use your url (http://fonts.googleapis.com/css?blah_blah_blah) it may be is not available to visitors from those countries.

Thanks google for this little piece of heaven, but unfortunately @font-face looks terrible on all things windows... Maybe you guys could create a work around for Microsoft, or tell everyone to buy a mac. :)

OMG these fonts are appalling. Why the hell didn't Google involve people with some design skills and aesthetic. Most of these fonts are shockingly bad (Droid font being an exception and one of the few professionally designed examples there). The rest are not hinted correctly, have poor spacing / kerning, and are almost unreadable on the vast majority of computers (Windows).

cmo - OMG why don't you shut up and go pleasure yourself to your well-worn photo of Robert Bringhurst? If you're such an amazing judge of typography, why don't you work toward contributing a less "shockingly" uprofessional font to this awesome project, instead of bitching and moaning?

windows rendering is and always has been an abomination. "cleartype" is a clever hack marketed as a feature which leaves color fringingon all characters.

the amount of technical refinement and detail work required to properly design and hint a font such that it will look good on windows precludes almost all small, open source font development efforts from being successful.

the only font from those currently available with google web fonts worth real use at body copy sizing is the "droid" family.. which was commissioned by google and beyond the capabilities of independent developers.

If you would like to download the fonts so you can preview them in photoshop and use them in your designs you can download all the Google API fonts here http://www.vincentdepalma.com/embed-fonts-on-the-web/

I had made a sample page with Tangerine, Cantarell, Lobster, Reenie Beanie, Old Standard TT , Josefin Sans Std Light at www.typefolly.comI am defer loading them, works from my location but if anyone can give me an input on the loading time I would be grateful.Thanx Google for “Making the Web Beautiful”.

PLEASE move this and your other CDN/API stuff to something.google.com instead of googleapis.com! Some corporate firewalls block googleapis.com because they don't recognize it, but nobody blocks google.com.

Designing a website that produces results takes a lot more than just a good looking site. It is the combination of visual appeal and all the things going on behind the scene that make the difference between success – and failure.Graphic Design Calgary

The Cardo font appears to lack the Greek and Hebrew characters that are part of the full font package. (The Old Standard TT does include the polytonic Greek characters.)BUT, the browser default settings apparently override the Greek/Hebrew characters. Am I missing how to get around that?

The web fonts don't render in Adobe BrowserLab for IE6-8 and FF3. However, I have seen them render in IE8 on a Windows machine. I hope Adobe is aware of this issue and finds a way to fix it. BrowserLab is so valuable it'd be a shame for this not to work.

Well, got this news recently and implement on my blogger blog, anyways, I documented all the things I do on implementing/using this google font directory on blogger blog. Check out this post: How to Use Google Font Directory on Blogger

Sorry. I should be more explicit in my comment. I went to the Google fonts site but none of the fonts are displaying. I can't see any fonts to choose from no matter what I do or button I push. Nothing is displaying.