"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.
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.
ReplyDeleteWow! This is great! Google is amazing!
ReplyDeleteThe 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.
ReplyDeletenice, 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.
ReplyDeleteVarun
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.
ReplyDeleteThis 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!
ReplyDeleteIndeed 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.
ReplyDeleteFor 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?
ReplyDeleteFor 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?
ReplyDeleteI wish it didn't lack some characters... 'ő' and 'ű' is missing from all these fonts, making it unusable for Hungarian.
ReplyDeleteDoes anyone know how to get the fonts in the "Google Font Directory" on a local system for use with photoshop, word, etc?
ReplyDelete@Anon:
ReplyDeleteIt'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
Thanks. I've got them as eot files. Having trouble converting them to ttf files (Windows).
ReplyDelete@Anonymous:
ReplyDeleteDownload the file using a different browser than Internet Explorer. You have many options: Firefox, Chrome, Opera, Safari.
Excellent. Thanks.
ReplyDeleteThank 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.
ReplyDeleteWorks great. I love it. Thank you so much
ReplyDeleteHello,
ReplyDeleteI 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.
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.
ReplyDeleteWhy would you want Comic Sans for default anything?
ReplyDeleteIrony I'm assuming.
ReplyDeletehttp://d3uwin5q170wpc.cloudfront.net/photo/78782_700b.jpg
great sharing. I was looking for adding google fonts in Photoshop 3. Can anyone help me on that.
ReplyDeleteThis 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