May 19, 2010

Google Font Directory

If you ever need a special font for your site, try one from the Google Font Directory. Google hosts 18 fonts that are available under an open source license, including the Droid fonts.

"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," explains Google.

Google not only hosts the fonts, but it also makes it easy to add the fonts to a page with a single line of HTML code. For example, if you want to use Droid Sans, add this code in the HEAD element:

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css' />

Then you can use Droid Sans in any CSS rule:

h1 { font-family: 'Droid Sans', arial, sans-serif; }

This is not an image



Google's code works in almost any browser. For Internet Explorer, Google converts the fonts to EOT (Embedded OpenType), a proprietary format created by Microsoft.

23 comments:

  1. wow this is great.something that I had been waiting all along.so I don't need to use typekit anymore that's costing me money.google has always made my life a lot cheaper.

    ReplyDelete
  2. Wow! This is great! Google is amazing!

    ReplyDelete
  3. The Droid Sans font on the HTC Droid Incredible -- one of the embeddable fonts available through this API -- is really superb. It is a very attractive Humanist-style font that is extremely readable, even to someone like me with really lousy eyesight. Being able to embed this font into websites will really make them look good.

    ReplyDelete
  4. nice, hope there are more fonts soon, especially in GMail. It's pretty annoying since GMail is superb, however, you don't get to use the rich fonts in GMail that are available in desktop apps.

    Varun

    ReplyDelete
  5. Font support lacks a lot even in modern browsers. I wish I had as much control over fonts as I do in Photoshop. Often I'll make a webpage mock-up in Photoshop and I'll never get it to look right when building the page.

    ReplyDelete
  6. This is awesome! I have always wanted to use something other than the usual for my sites, and now I can without worrying about people not having the fonts!

    ReplyDelete
  7. Indeed this is great news for web developers. But i don't know why some fonts are very ugly in Firefox and display very well in Chrome and Internet Explorer.

    ReplyDelete
  8. For me, it doesn't work on FF 3.6.3 - I just see plain old Arial (the same on official Font Directory). Do You have any idea why?

    ReplyDelete
  9. For me, the image isn't the same as the css3-styled text (using chrome 5). Though by activating the debugger and removing 'Droid Sans' it appears to the Droid font is actually working. So Droid Sans looks kind of a narrow Arial or a nicer Verdana?

    ReplyDelete
  10. I wish it didn't lack some characters... 'ő' and 'ű' is missing from all these fonts, making it unusable for Hungarian.

    ReplyDelete
  11. Does anyone know how to get the fonts in the "Google Font Directory" on a local system for use with photoshop, word, etc?

    ReplyDelete
  12. @Anon:

    It's not that difficult. Get the embedding code, find the URL of the CSS stylesheet, open the file in your browser and find the web address of the font. Download the font.

    For Droid Sans the URL is: http://themes.googleusercontent.com/font?kit=POVDFY-UUf0WFR9DIMCU8g

    ReplyDelete
  13. Thanks. I've got them as eot files. Having trouble converting them to ttf files (Windows).

    ReplyDelete
  14. @Anonymous:

    Download the file using a different browser than Internet Explorer. You have many options: Firefox, Chrome, Opera, Safari.

    ReplyDelete
  15. Excellent. Thanks.

    ReplyDelete
  16. Thank you for this great information. I've applied it in my site and work well. But I wonder what it influence to the page speed.

    ReplyDelete
  17. Works great. I love it. Thank you so much

    ReplyDelete
  18. Hello,
    I think I will choose a new font for my blog, because it seems that my font wasn't great for my current blog. Thanks for sharing this news.

    Brad.

    ReplyDelete
  19. I chose Comic San MS for Gmail default text but when I click this font on the drop down font list, another font comes up. Can anybody tell what I can do for it? I wonder I accidentally do something wrong 'cause I got Comic San before.

    ReplyDelete
  20. Why would you want Comic Sans for default anything?

    ReplyDelete
  21. Irony I'm assuming.

    http://d3uwin5q170wpc.cloudfront.net/photo/78782_700b.jpg

    ReplyDelete
  22. great sharing. I was looking for adding google fonts in Photoshop 3. Can anyone help me on that.

    ReplyDelete
  23. This post saved my day.I am very busy and I was looking for this information about Google fonts.The code is very useful for my project ;)

    ReplyDelete

Note: Only a member of this blog may post a comment.