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

119 comments:

  1. There's a mistake in the sample code. It should read <link href=... and not <href=...

    ReplyDelete
  2. Do these fonts support anti-aliasing? Sub-pixel or otherwise?

    ReplyDelete
  3. @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).

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Hi,
    I 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...

    ReplyDelete
  6. 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)"

    Unfortunately that format compatibility does not extend to the Google Font Directory site itself, which refuses to work on Firefox 3.0.x...

    ReplyDelete
  7. Congratulations, Raph. I've always enjoyed your projects and I'm glad to see this one reach a huge audience.

    ReplyDelete
  8. Did I read that right? It's even compatible with *IE6*? (@___@') Awesome.

    ReplyDelete
  9. Incredible work. Any chance of this being available for Google Sites?

    ReplyDelete
  10. This is BIG news. Fantastic!!

    ReplyDelete
  11. Awesomeness!

    ReplyDelete
  12. There'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:

    http://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?

    ReplyDelete
  13. 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?

    ReplyDelete
  14. Congrats for the launch!
    This is awesome!

    Google Web Fonts Rock!

    ReplyDelete
  15. The whole set of fonts needs to be available for download so designers can use them for mockups and comps.

    ReplyDelete
  16. so maybe I'm missing something, but why is that "Making the Web Beautiful" an image?

    ReplyDelete
  17. Awesome. Thanks for the web fonts - I'll be using them real soon.

    You've got a spelling error on one of the fonts pages (loooking): http://code.google.com/apis/webfonts/docs/getting_started.html

    ReplyDelete
  18. 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.

    ReplyDelete
  19. Sweet, looking forward to more fonts being added to the collection.

    Great work.

    ReplyDelete
  20. @jimkal & @sep332:

    Wouldn'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 ? :)

    ReplyDelete
  21. @Andrew said ... "the Google Font Directory site itself, which refuses to work on Firefox 3.0.x"

    Yah Firefox 3.0 is two versions old now. Firefox 3.5 and 3.6 both have support for webfonts.

    ReplyDelete
  22. 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.

    ReplyDelete
  23. Fantastic news! I'll be following this closely.

    ReplyDelete
  24. If 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
  25. @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.

    ReplyDelete
  26. Awesome. Now to find some use for it in some projects. Could be the next big thing over on themeforest lol.

    Keep up the good work google team.

    ReplyDelete
  27. 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>

    ReplyDelete
  28. good stuff thanks
    sefati.net

    ReplyDelete
  29. 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!

    ReplyDelete
  30. Will the fonts support other languages (I'm thinking of Turkish)? Couldn't find any info on that.

    ReplyDelete
  31. The Nobile bug on Mac is pretty weird, and appears in Chrome as well.

    ReplyDelete
  32. NICE... love this... when do we get more selection in fonts?

    ReplyDelete
  33. Are there chrome extensions which allow me to change pages default fonts to ones I prefer?

    Does this extension: https://chrome.google.com/extensions/detail/lafefailhanildnhnahlnjodgceinace

    ReplyDelete
  34. 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?)

    ReplyDelete
  35. Fonts from the Google Font Directory don't work at all in Firefox 3.6.3 on Windows XP.

    http://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/

    ReplyDelete
  36. 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.

    ReplyDelete
  37. the fonts look horrible on my screen. no aliasing at all

    ReplyDelete
  38. There'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.

    (ignore the space in "< link" as that is to bypass the HTML check on comments)

    ReplyDelete
  39. Now THAT's a big relief....
    Thanks google.
    :)

    ReplyDelete
  40. Great!!, thx for sharing

    ReplyDelete
  41. åwë§ømë ƒëåtü®ë...gø-gø-gø gøøglë

    ReplyDelete
  42. is this for real? cool \m/

    ReplyDelete
  43. I 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!

    ReplyDelete
  44. Yeah, 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.

    ReplyDelete
  45. Strange, on my homw computer the fonts look really smooth and anti-aliased ( win XP, google chrome )

    But on my work computer they anti-aliasing looks terribly ( win 7, googl chrome and firefox )

    ReplyDelete
  46. .








    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.

    I want ALL PEOPLE see my site (with my preffered fonts).







    .

    ReplyDelete
  47. Related post:

    http://gluegadget.com/blog/index.php?/archives/31-The-Web-is-broken-for-me,-and-its-all-your-fault-Google!.html

    ReplyDelete
  48. 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. :)

    ReplyDelete
  49. Such greatness! This is just wonderful news!

    ReplyDelete
  50. Our firewall blocked the fonts with message:

    403 Forbidden: header 'Content-Type' value denied themes.googleusercontent.com

    We had to add a new rule. How common is this likely to be?

    ReplyDelete
  51. don't forget Urdu!
    The quicker the better!

    ReplyDelete
  52. 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).

    ReplyDelete
  53. 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?

    ReplyDelete
  54. For some reason I still prefer cufon to this approach, most fonts in Firefox and Explorer look much better that way!

    ReplyDelete
  55. FYI this doesn't work at all on Android (at least on the Nexus one)

    ReplyDelete
  56. What 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.

    ReplyDelete
  57. They look disgusting under windows 7 in Chrome, Firefox and IE 8. Full of aliasing.

    ReplyDelete
  58. Yep, nasty in Win7 even after adjusting ClearType settings. They look fantastic in OSX though.

    ReplyDelete
  59. 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.

    Looks pretty good on Macs though

    ReplyDelete
  60. Yup, on my OS X box - these are crisp and beautiful... just another reason =)

    ReplyDelete
  61. that's a good article .i enjoyed it.

    hitesh joshi
    http:/hiteshjoshi.com

    ReplyDelete
  62. 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...

    ReplyDelete
  63. Really Great!

    Created a blog post for this.
    http://bit.ly/92huWw

    ReplyDelete
  64. I had made a sample page with Tangerine, Cantarell, Lobster, Reenie Beanie, Old Standard TT , Josefin Sans Std Light at www.typefolly.com
    I 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”.

    ReplyDelete
  65. looks good. unfortunately noscript seems to block it, and its quite hard to find how to enable it (Blocked objects menu)

    ReplyDelete
  66. Is user agent sniffing used?

    @Eric: Huh, they look fine here.

    @ssam: In the NoScript settings under the tab "Embeddings" you will find a checkbox "Forbid @font-face".

    ReplyDelete
  67. @Golmorad: I very much doubt that googleapis.com is on any blacklist.

    BTW: I predict that this service still won't stop discourage herp-derp designers from using Comic Sans or highly compressed JPEGs for titles, etc.

    ReplyDelete
  68. when will be available Cyrillic fonts?

    ReplyDelete
  69. There're no polish characters - ąśćłń, etc. So, nice, but not very useful

    ReplyDelete
  70. 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.

    Thanks!

    ReplyDelete
  71. @jan van lysebettens Yeah, anti-aliasing looks great in ffox on my mac, but terrible in chrome in Win 7. What's going on?

    ReplyDelete
  72. For 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.

    The code would have to be

    h1 { font-family: 'Tangerine', Helvetica; }

    or something like that.

    ReplyDelete
  73. I'll just assume you guys are already aware of how the fonts are rendering all aliased and jagged.

    =______=

    ReplyDelete
  74. Very interesting... wondering, can the fonts be downloaded and redistributed along with an open source desktop application?

    Can 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)?

    ReplyDelete
  75. 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.

    Check it out here: http://willmoyer.com/plato/

    ReplyDelete
  76. Vista with Chrome here and they look horrible. Aliased and jagged.

    ReplyDelete
  77. What about on my demo Laurent? Should be pretty in Chrome.

    ReplyDelete
  78. We use Photoshop to comp pages, so where can I find screen fonts versions of these faces?

    ReplyDelete
  79. this is not working in my Firefox 3.6.3, other browser supports well.

    venkatesh

    ReplyDelete
  80. Cheacked it with IE5...even works with that! Amazing!

    ReplyDelete
  81. only works in Chrome on my work XP box. FF 3.6.3, IE 8 and Opera 10 just revert to Arial

    ReplyDelete
  82. Very pretty fonts in Ubuntu!!. I had problems with Firefox add-on NoScript because it was blocking the fonts.

    ReplyDelete
  83. http://code.google.com/webfonts/family?family=Josefin+Sans+Std+Light

    Josefin doesn't work on ie6. Bad EOT file I presume.

    Good luck.

    ReplyDelete
  84. I can't see the different fonts on my network PC. Is there anything that might be getting blocked?

    ReplyDelete
  85. 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

    ReplyDelete
  86. It works :) thank you Google :)

    ReplyDelete
  87. How does this function with those of use on closed networks?

    ReplyDelete
  88. 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?

    ReplyDelete
  89. Does this work with SSL too?

    ReplyDelete
  90. Josefin Sans Std Light doesn't work in Internet Explorer 8, possibly all versions judging on Toneproof's comment.

    ReplyDelete
  91. This comment has been removed by the author.

    ReplyDelete
  92. Check the Google Font API viewer application: http://www.satya-weblog.com/2010/06/google-font-api-font-viewer-2.html

    ReplyDelete
  93. Josefin Sans Std Light isn't working for me in IE8. Any fix available?

    ReplyDelete
  94. the font api isn't working today (yesterday it was)

    ReplyDelete
  95. Anyone familiar with this problem?

    http://designinformer.com/forums/topic/google-font-api-bold-text-only-showing-in-webkit-browser

    ReplyDelete
  96. http://code.google.com/webfonts/family?family=Droid+Sans
    Droid Sans is not working as a webfont in Chrome Browser for MAC!!!!!!!!!!!!!
    It's some kind of absurd.
    Please FiX IT !!!

    ReplyDelete
  97. is working good... thz google :)

    ReplyDelete
  98. I've found that some fonts from the Google Font APIdon't display properly in Chrome or Internet Explorer, I show the solution here:

    http://webdesignandsuch.com/2010/07/fix-fonts-that-dont-work-with-google-font-api-in-internet-explorer-or-chrome-with-font-face/

    ReplyDelete
  99. @nancy

    Here'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/

    ReplyDelete
  100. 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.

    ReplyDelete
  101. Nobile isn't working as it should on IE8

    ReplyDelete
  102. How to make new fonts for Android ?

    ReplyDelete
  103. Are these fonts support native languages? For example, I'm from Russia, and for my sites I need cyrillic charsets.

    А эти шрифты поддерживают национальные алфавиты? Например я из России, и хотел бы использовать на своих сайтах кириллический набор символов.

    ReplyDelete
  104. The font page is still crashing Firefox under Linux (and perhaps other operating systems) as of Oct 4, 2010

    ReplyDelete
  105. Hey, 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!

    ReplyDelete
  106. Google fonts page http://code.google.com/webfonts still crashing Firefox under Ubuntu.

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

    ReplyDelete
  107. Great job!

    Of course more fonts would be appreciated, but more importantly, I'd love a "light" version of the fonts.

    Keep em coming! Thanks!

    ReplyDelete
  108. How did I just find this? AMAZING! Keep up the great work.

    ReplyDelete
  109. Why Catull isn't on the directory :'(

    Anyway this is a fantastic work.

    ReplyDelete
  110. I can't see to get any fonts to display either in Chrome or Firefox.

    ReplyDelete
  111. 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.

    Ian

    ReplyDelete
  112. is there a possibility to add a font personnel in site fonts.googleapis.com if so how I can do, please

    ReplyDelete
  113. google web fonts api do not support our language.
    Is it possible to build our self hosted web fonts api as the same as google web fonts. For example, using google app engine.
    Thanks.

    ReplyDelete
  114. I just wrote a post on Google fonts check it out:
    http://gmadar.com/google-web-fonts-api/

    ReplyDelete
  115. 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