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

23 comments:

  1. jacobianMay 19, 2010 at 2:59 PM

    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. Aaron's VailMay 19, 2010 at 7:26 PM

    Wow! This is great! Google is amazing!

    ReplyDelete
  3. Michael SullivanMay 19, 2010 at 8:19 PM

    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. VarunMay 19, 2010 at 8:56 PM

    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. AnonymousMay 19, 2010 at 9:56 PM

    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. lowlightMay 19, 2010 at 10:45 PM

    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. LaciMay 19, 2010 at 10:59 PM

    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. Magda & MichałMay 19, 2010 at 11:26 PM

    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. SimonMay 20, 2010 at 1:59 PM

    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. UnknownMay 20, 2010 at 2:20 PM

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

    ReplyDelete
  11. AnonymousMay 20, 2010 at 3:23 PM

    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. Alex ChituMay 20, 2010 at 3:40 PM

    @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. AnonymousMay 21, 2010 at 12:33 PM

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

    ReplyDelete
  14. Alex ChituMay 21, 2010 at 12:36 PM

    @Anonymous:

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

    ReplyDelete
  15. AnonymousMay 21, 2010 at 3:10 PM

    Excellent. Thanks.

    ReplyDelete
  16. dakwah islamMay 22, 2010 at 6:33 AM

    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. DavidAugust 21, 2010 at 2:27 AM

    Works great. I love it. Thank you so much

    ReplyDelete
  18. BradAugust 21, 2010 at 2:30 AM

    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. AnonymousAugust 31, 2011 at 11:22 PM

    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. AnonymousSeptember 8, 2011 at 12:03 PM

    Why would you want Comic Sans for default anything?

    ReplyDelete
  21. AnonymousOctober 3, 2011 at 11:50 AM

    Irony I'm assuming.

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

    ReplyDelete
  22. Man And VanNovember 18, 2011 at 4:39 AM

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

    ReplyDelete
  23. AndaMarch 7, 2012 at 1:50 AM

    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.