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:
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
body { font-family: 'Tangerine', serif; }
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.
There's a mistake in the sample code. It should read <link href=... and not <href=...
ReplyDeleteDo these fonts support anti-aliasing? Sub-pixel or otherwise?
ReplyDelete@TPReal: thanks, we just noticed that and will fix that asap (I don't have edit access)
ReplyDelete@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).
This comment has been removed by the author.
ReplyDeleteHi,
ReplyDeleteI used this on my blog http://rajcomicscollection.blogspot.com I put link code in head part then changed font from Georgia to Tagrine but it didn't work, does it generally take time to work...
You wrote "Google’s serving infrastructure takes care of converting the font into a format compatible with any modern browser (including Internet Explorer 6 and up)"
ReplyDeleteUnfortunately that format compatibility does not extend to the Google Font Directory site itself, which refuses to work on Firefox 3.0.x...
Congratulations, Raph. I've always enjoyed your projects and I'm glad to see this one reach a huge audience.
ReplyDeleteDid I read that right? It's even compatible with *IE6*? (@___@') Awesome.
ReplyDeleteIncredible work. Any chance of this being available for Google Sites?
ReplyDeleteThis is BIG news. Fantastic!!
ReplyDeleteAwesomeness!
ReplyDeleteThere's a rather odd rendering bug with the Nobile font in Mac OS X - it seems to be an issue with Apple's font renderer, not with any particular browser, as it even happens with the source TTFs:
ReplyDeletehttp://zone38.net/misc/nobile-font-bug.png
Works fine when I export the .sfd as OpenType, but this bug occurs when it's exported as TrueType.
Any idea what would cause this?
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?
ReplyDeleteCongrats for the launch!
ReplyDeleteThis is awesome!
Google Web Fonts Rock!
The whole set of fonts needs to be available for download so designers can use them for mockups and comps.
ReplyDeleteso maybe I'm missing something, but why is that "Making the Web Beautiful" an image?
ReplyDeleteAwesome. Thanks for the web fonts - I'll be using them real soon.
ReplyDeleteYou've got a spelling error on one of the fonts pages (loooking): http://code.google.com/apis/webfonts/docs/getting_started.html
Isn't it hypocritical to use an image to show off your imageless font technology?? And one of your "couple lines of HTML" is actually CSS.
ReplyDeleteSweet, looking forward to more fonts being added to the collection.
ReplyDeleteGreat work.
@jimkal & @sep332:
ReplyDeleteWouldn't that be because the author of this article can't add the required "link" tag to the head of this page, since this just a blogspot after all ? :)
@Andrew said ... "the Google Font Directory site itself, which refuses to work on Firefox 3.0.x"
ReplyDeleteYah Firefox 3.0 is two versions old now. Firefox 3.5 and 3.6 both have support for webfonts.
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.
ReplyDeleteFantastic news! I'll be following this closely.
ReplyDeleteIf you're not free to make a live demo in the blog post, could you at least add a link to live demos that show off its power?
ReplyDelete@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.
ReplyDeleteAwesome. Now to find some use for it in some projects. Could be the next big thing over on themeforest lol.
ReplyDeleteKeep up the good work google team.
Just put this in a file and open it:
ReplyDelete<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>
good stuff thanks
ReplyDeletesefati.net
this is pure awesomeness! wish this was around when I was creating reports during my last development project to make them look nicer and remain web safe!
ReplyDeleteWill the fonts support other languages (I'm thinking of Turkish)? Couldn't find any info on that.
ReplyDeleteThe Nobile bug on Mac is pretty weird, and appears in Chrome as well.
ReplyDeleteNICE... love this... when do we get more selection in fonts?
ReplyDeleteAre there chrome extensions which allow me to change pages default fonts to ones I prefer?
ReplyDeleteDoes this extension: https://chrome.google.com/extensions/detail/lafefailhanildnhnahlnjodgceinace
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?)
ReplyDeleteFonts from the Google Font Directory don't work at all in Firefox 3.6.3 on Windows XP.
ReplyDeletehttp://code.google.com/webfonts
I'm just getting a page full of Times New Roman. Works fine in all other browsers.
FontSquirrel & Typekit work fine on this page, Google just reverting to Arial:
http://www.fontsquirrel.com/webfont_comparison/
The Google Font Directory also doesn't appear to be working for Safari on iPad. All the fonts appear to be rendering as (I believe) Helvetica.
ReplyDeletethe fonts look horrible on my screen. no aliasing at all
ReplyDeleteThere's an error in the code. It should read < link [...] /> instead of < link [...] > to validate as valid XHTML. Basic XHTML rules about self-closing elements, you know.
ReplyDelete(ignore the space in "< link" as that is to bypass the HTML check on comments)
Now THAT's a big relief....
ReplyDeleteThanks google.
:)
Great!!, thx for sharing
ReplyDeleteåwë§ømë ƒëåtü®ë...gø-gø-gø gøøglë
ReplyDeleteis this for real? cool \m/
ReplyDeleteI think it would be nice if one can create his own font collection base on the google account. By doing that, the web designer/devloper can use the commercial fonts easily!
ReplyDeleteYeah, will look forward to this, when there are fonts with more charsets implemented. So far it is of no much use outside the US + WEU.
ReplyDeleteStrange, on my homw computer the fonts look really smooth and anti-aliased ( win XP, google chrome )
ReplyDeleteBut on my work computer they anti-aliasing looks terribly ( win 7, googl chrome and firefox )
Google... I love you!
ReplyDelete.
ReplyDeleteI 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.
I want ALL PEOPLE see my site (with my preffered fonts).
.
Related post:
ReplyDeletehttp://gluegadget.com/blog/index.php?/archives/31-The-Web-is-broken-for-me,-and-its-all-your-fault-Google!.html
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. :)
ReplyDeleteSuch greatness! This is just wonderful news!
ReplyDeleteOur firewall blocked the fonts with message:
ReplyDelete403 Forbidden: header 'Content-Type' value denied themes.googleusercontent.com
We had to add a new rule. How common is this likely to be?
don't forget Urdu!
ReplyDeleteThe quicker the better!
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).
ReplyDeletecmo - 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?
ReplyDeleteFor some reason I still prefer cufon to this approach, most fonts in Firefox and Explorer look much better that way!
ReplyDeleteFYI this doesn't work at all on Android (at least on the Nexus one)
ReplyDeleteWhat some say its true. They look so bad in Windows that they're unusable. At least, the amount of aliasing and rendering bugs will keep all designers away from them.
ReplyDeleteThey look disgusting under windows 7 in Chrome, Firefox and IE 8. Full of aliasing.
ReplyDeleteWow, er, whoopdy-doo?
ReplyDeleteYep, nasty in Win7 even after adjusting ClearType settings. They look fantastic in OSX though.
ReplyDeletewindows rendering is and always has been an abomination. "cleartype" is a clever hack marketed as a feature which leaves color fringingon all characters.
ReplyDeletethe 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.
Looks pretty good on Macs though
Yup, on my OS X box - these are crisp and beautiful... just another reason =)
ReplyDeletethat's a good article .i enjoyed it.
ReplyDeletehitesh joshi
http:/hiteshjoshi.com
Ooh... this has potential. Any plans to expand the library beyond these 18? I just ran into Gentium, and I'm starting to become fond of it...
ReplyDeleteReally Great!
ReplyDeleteCreated a blog post for this.
http://bit.ly/92huWw
I had made a sample page with Tangerine, Cantarell, Lobster, Reenie Beanie, Old Standard TT , Josefin Sans Std Light at www.typefolly.com
ReplyDeleteI 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”.
looks good. unfortunately noscript seems to block it, and its quite hard to find how to enable it (Blocked objects menu)
ReplyDeleteIs user agent sniffing used?
ReplyDelete@Eric: Huh, they look fine here.
@ssam: In the NoScript settings under the tab "Embeddings" you will find a checkbox "Forbid @font-face".
@Golmorad: I very much doubt that googleapis.com is on any blacklist.
ReplyDeleteBTW: I predict that this service still won't stop discourage herp-derp designers from using Comic Sans or highly compressed JPEGs for titles, etc.
when will be available Cyrillic fonts?
ReplyDeleteThere're no polish characters - ąśćłń, etc. So, nice, but not very useful
ReplyDeletePLEASE 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.
ReplyDeleteThanks!
@jan van lysebettens Yeah, anti-aliasing looks great in ffox on my mac, but terrible in chrome in Win 7. What's going on?
ReplyDeleteFor incompatible users in countries with no access to Google (such as those Middle East countries mentioned above), I think making a font-family would work.
ReplyDeleteThe code would have to be
h1 { font-family: 'Tangerine', Helvetica; }
or something like that.
I'll just assume you guys are already aware of how the fonts are rendering all aliased and jagged.
ReplyDelete=______=
Very interesting... wondering, can the fonts be downloaded and redistributed along with an open source desktop application?
ReplyDeleteCan the API be used by desktop/server apps as well as a tool to download the font files (assuming the font listing grows with time)?
I think I may have found a hack to stop the aliasing (jagged edges) on Windows machines. It only works in WebKit though, so I don't know how useful it is.
ReplyDeleteCheck it out here: http://willmoyer.com/plato/
Vista with Chrome here and they look horrible. Aliased and jagged.
ReplyDeleteWhat about on my demo Laurent? Should be pretty in Chrome.
ReplyDeleteWe use Photoshop to comp pages, so where can I find screen fonts versions of these faces?
ReplyDeletethis is not working in my Firefox 3.6.3, other browser supports well.
ReplyDeletevenkatesh
Cheacked it with IE5...even works with that! Amazing!
ReplyDeleteonly works in Chrome on my work XP box. FF 3.6.3, IE 8 and Opera 10 just revert to Arial
ReplyDeleteon what page minhtam?
ReplyDeleteVery pretty fonts in Ubuntu!!. I had problems with Firefox add-on NoScript because it was blocking the fonts.
ReplyDeletehttp://code.google.com/webfonts/family?family=Josefin+Sans+Std+Light
ReplyDeleteJosefin doesn't work on ie6. Bad EOT file I presume.
Good luck.
I can't see the different fonts on my network PC. Is there anything that might be getting blocked?
ReplyDeleteDesigning 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
ReplyDeleteIt works :) thank you Google :)
ReplyDeleteHow does this function with those of use on closed networks?
ReplyDeleteThe 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.)
ReplyDeleteBUT, the browser default settings apparently override the Greek/Hebrew characters. Am I missing how to get around that?
Does this work with SSL too?
ReplyDeleteJosefin Sans Std Light doesn't work in Internet Explorer 8, possibly all versions judging on Toneproof's comment.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteCheck the Google Font API viewer application: http://www.satya-weblog.com/2010/06/google-font-api-font-viewer-2.html
ReplyDeleteJosefin Sans Std Light isn't working for me in IE8. Any fix available?
ReplyDeletethe font api isn't working today (yesterday it was)
ReplyDeleteAnyone familiar with this problem?
ReplyDeletehttp://designinformer.com/forums/topic/google-font-api-bold-text-only-showing-in-webkit-browser
http://code.google.com/webfonts/family?family=Droid+Sans
ReplyDeleteDroid Sans is not working as a webfont in Chrome Browser for MAC!!!!!!!!!!!!!
It's some kind of absurd.
Please FiX IT !!!
is working good... thz google :)
ReplyDeleteI've found that some fonts from the Google Font APIdon't display properly in Chrome or Internet Explorer, I show the solution here:
ReplyDeletehttp://webdesignandsuch.com/2010/07/fix-fonts-that-dont-work-with-google-font-api-in-internet-explorer-or-chrome-with-font-face/
@nancy
ReplyDeleteHere's how to make Josefin Sans Std Light work:
http://webdesignandsuch.com/2010/07/fix-fonts-that-dont-work-with-google-font-api-in-internet-explorer-or-chrome-with-font-face/
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.
ReplyDeleteNobile isn't working as it should on IE8
ReplyDeleteHow to make new fonts for Android ?
ReplyDeleteAre these fonts support native languages? For example, I'm from Russia, and for my sites I need cyrillic charsets.
ReplyDeleteА эти шрифты поддерживают национальные алфавиты? Например я из России, и хотел бы использовать на своих сайтах кириллический набор символов.
The font page is still crashing Firefox under Linux (and perhaps other operating systems) as of Oct 4, 2010
ReplyDeleteHey, yeah also having a problem with Nobile font rendering in Mozilla 3.6.10, weird thing is that it had been working. Same issue with IE 8. I really dig that font too!
ReplyDeleteGood
ReplyDeleteGoogle fonts page http://code.google.com/webfonts still crashing Firefox under Ubuntu.
ReplyDeleteFirefox views the pages I create with the embedded fonts fine but every time I try to view http://code.google.com/webfonts, firefox immediately terminates.
My Ubuntu system is fully up to date as is firefox.
Great job!
ReplyDeleteOf course more fonts would be appreciated, but more importantly, I'd love a "light" version of the fonts.
Keep em coming! Thanks!
How did I just find this? AMAZING! Keep up the great work.
ReplyDeleteWhy Catull isn't on the directory :'(
ReplyDeleteAnyway this is a fantastic work.
I can't see to get any fonts to display either in Chrome or Firefox.
ReplyDeleteSorry. 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.
ReplyDeleteIan
is there a possibility to add a font personnel in site fonts.googleapis.com if so how I can do, please
ReplyDeletegoogle web fonts api do not support our language.
ReplyDeleteIs it possible to build our self hosted web fonts api as the same as google web fonts. For example, using google app engine.
Thanks.
I just wrote a post on Google fonts check it out:
ReplyDeletehttp://gmadar.com/google-web-fonts-api/
this was and still is so great, especially for web designers, I remember the day when it was launched and since then I have not stopped using it, keep up the good work!
ReplyDelete