6 ms·

New Google Web Fonts Interface

307 points by jamesjyu 15y ago

hydrazine 15y ago
Super like! Can't wait to try it. Looks much easier than tinkering with raw CSS. Edit: 2 lines of code were all I needed to add. Ridiculously easy.
jackpirate 15y ago
How is this useful if everyone else hasn't already downloaded those fonts? Everyone has Ariel. That's why it is so popular.
- hydrazine 15y ago
  The fonts are delivered from Google in real-time and don't have to be pre-downloaded. That's the beauty of it! But of course Arial is still a good default.
  - natesm 15y ago
    "Helvetica Neue", Helvetica, Arial is a better default! Show the good one to those of us that have it (all Mac OS X and iOS users).
    - wahnfrieden 15y ago
      Helvetica usually looks like shit on Windows if the user happens to have it. So you might try a different order, or just rely on most Mac users having Helvetica Neue.
- notJim 15y ago
  You can embed font declarations in CSS (the @font-face declaration), specifying a path to a download. The browser will download the font and show it on web pages with the declaration. Google offers an array of freely-available (open source, actually, I think, but I'm not 100% sure) fonts that are hosted on their servers that you can use.
  - jackpirate 15y ago
    That makes a lot more sense... I'm a little behind the times I guess with my CSS.
  - ethereal 15y ago
    > (open source, actually, I think, but I'm not 100% sure) To quote from the "introduction" dialog [0]: "Hundreds of free, open-source fonts optimized for the web". Looking further, the "about" page [1] provides a bit more information: "All the Google web fonts are open source. That means that you are free to to use them in any way you want, independent of whether you're working on a private or commercial project." I'm not sure what license they're using, though . . . I can't find anything but Google's standard "terms of service" license anywhere on the site. [0] http://www.google.com/webfonts/v2#HomePlace:home http://www.google.com/webfonts/v2#HomePlace:home [1] http://www.google.com/webfonts/v2#AboutPlace:about http://www.google.com/webfonts/v2#AboutPlace:about
    - elwin 15y ago
      The licenses are on the individual fonts' pages (try the "Pop Out" links.) Most of them are under the SIL Open Font License.
cdcarter 15y ago
This is fantastic! I've been waiting and waiting for Web Fonts to expand, and now I have a lot more choices than Syncopate and Raleway.
- StacyC 15y ago
  As if we need more than two fonts!
- eps 15y ago
  Don't pop the champagne just yet. Virtually all fonts listed in Google's directory render poorly on Windows in larger pixel sizes. This is caused by the lack of ClearType-specific hinting in these fonts, and it leads to the appearance of so-called "nipples" - odd pixels sticking out at the top and the bottom of glyphs and from thin horizontal strokes. More bad news is that properly hinting fonts for ClearType is a relatively expensive process, and very few foundries do it even for commercial fonts. Unless Google goes beyond simply listing fonts and starts cutting cheques to polish them, these fonts will remain largely unusable for Windows' audiences.
  - cdcarter 15y ago
    Interesting! Too bad Google doesn't list that limitation, eh? Since I don't have a Windows machine to access right now, what size is "larger pixel sizes?" I'd like to know what I'm working with.
    - gimpf 15y ago
      It is already clearly recognizable at the default font size.
  - ZeroGravitas 15y ago
    At I/O they seemed to be talking about some automated hinting process to try and fix this. It won't be as good a something hand-hinted by a professional but it might be good enough for some uses.
201studio 15y ago
How many awesome things can Google roll out in a day?
- JakeSc 15y ago
  I'm blown away. Happy Tau Day!
- shii 15y ago
  They tend to do this. They'll be sorta quiet for awhile and then boom boom boom, nonstop shipping of products and improvements released to the public and lots of press coverage and light on them.
tobobo 15y ago
Wow - I've never seen a cleaner font browsing interface, and they make using the fonts you look at so easy I didn't even realize I was doing it. Let's hope the Web Fonts API doesn't go the way of the Translate API, or many webpages will be rendered in incorrect fonts. Horror!!
- beck5 15y ago
  Not quite the same load. Google fonts is more like Google Libraries than translate.
thedjpetersen 15y ago
Shoot right after I wrote this too... https://github.com/thedjpetersen/Google-Font-Api-Scraper https://github.com/thedjpetersen/Google-Font-Api-Scraper
- jonursenbach 15y ago
  At least you probably learned something while making it so it wasn't time wasted.
hsmyers 15y ago
Keeps getting better with each iteration! That said, I'd still like to see some pi fonts and printer's ornaments...
habitatforus 15y ago
Judging by the other comments, it's just me, but the fonts look worse now. They aren't smooth at all. Why?
- sad_hacker 15y ago
  I noticed the same... they have never been smooth on Firefox (Windows 7 64bit), but now they aren't even smooth in IE... can anyone else confirm that?
- aik 15y ago
  Most other comments are commenting on the interface, which is definitely great and impressive. As for the fonts, they're not smooth for me either.
- XLcommerce 15y ago
  Cleartype wreaks havoc on webfonts. Turning it off gives you smooth fonts, but jaggy regular text >:| Strangely IE6 (and 7? i think) are OK even with cleartype on. There is a css hack to get font smoothing on windows: h1{ text-shadow: 0 0 0 rgba(0,0,0,0.0001); /* Transparent Shadow make some kind of webkit font smoothing kick in */ }
  - habitatforus 15y ago
    I turned Cleartype off and that helped. The text shadow trick helped as well. I would have thought that using Chrome would mean that Google's fonts would have displayed correctly, but I guess Cleartype overrides that. I miss the day when testing a website meant using just IE and Netscape -- now I have to turn Cleartype on and off ... ugh
  - uptown 15y ago
    Thanks for that hack. I'd never seen that one before but font smoothing on Windows has always driven me nuts.
StacyC 15y ago
Nice improvement to the interface. I've just recently started using these fonts a bit and I really like the service. The collection is growing too so there's a good variety there. Nice job, Google.
- cageface 15y ago
  I went to Google fonts yesterday for a design project for the first time in at least a year and was very happy to see how much the collection has grown. This new interface is icing on the cake. Making these fonts so easy to use really opens the doors to much more creative and effective use of type on the web.
thematt 15y ago
Great interface, but the number of fonts is a bit overwhelming to browse through. It would be awesome if you could sort by "most downloaded" or "most used" -- just to get some ideas.
- callmeed 15y ago
  Strange, the old interface had a sort by "trending" which is sort of what you're looking for. Not sure why it was removed.
lautenbach 15y ago
anyone have experience using this after typekit? we've been somewhat disappointed with the inconsistency of typekit's rendering lately and are looking for another option...
theatrus2 15y ago
Didact Gothic is a nice one for headlines.
abhaga 15y ago
I wish they would add Indic scripts too!
ThomPete 15y ago
This has several flaws. For it's not consistent. I filtered for Serif and got sans serif in the mix. But even worse. You can't specify very precisely. For instance if I need a slab serif how do I filter that?
ya3r 15y ago
They once had some Arabic fonts. Where did they go? http://i.imgur.com/L5hSF.png http://i.imgur.com/L5hSF.png This is a snapshot of their IO's session video.
- callahad 15y ago
  I don't think those were ever publicly available -- probably an internal test. I still had a Google Web Fonts tab open from last night, and it only shows options for Cyrillic, Greek, Khmer, and Latin: http://i.imgur.com/T3sh5.png http://i.imgur.com/T3sh5.png
scottseaward 15y ago
I like this a lot. I'd love to see a monospace fonts filter. Although, saying that, it looks to my eye like the only monospace font on there is Inconsolata.
rglover 15y ago
This is a great update to their existing library. It reminds me a lot of Fontcase and similar font browsing apps. It's great to see that their library keeps growing. Definitely going to make this a first-stop before working on designs from here on out. Thanks, Google.
JCB_K 15y ago
I still don't see the point of a service like this. With a tiny bit more work you have them on your own server, and you have all the control. If Google tomorrow decides to stop serving fonts, your design won't be broken. With some services I understand people rather have it externally has it's a hassle to do it yourself, but @font-face is too easy to not do it.
- Jach 15y ago
  Note they let you download the .ttf's... But the idea is the same as using google apis for things like jquery. It lets you prototype quickly without having to load a new font on your server every time you want to test something different, if this gets popular and you're using a popular font chances are it'll already be in the user's browser cache, and most importantly from my perspective there isn't any ambiguity with this list as to which fonts I can and can't legally redistribute. Obviously don't count on Google to always be there for you.
- deleted 15y ago
  [deleted]

307 points by jamesjyu 15y ago

Super like! Can't wait to try it. Looks much easier than tinkering with raw CSS. Edit: 2 lines of code were all I needed to add. Ridiculously easy.

jackpirate 15y ago

How is this useful if everyone else hasn't already downloaded those fonts? Everyone has Ariel. That's why it is so popular.

hydrazine 15y ago
The fonts are delivered from Google in real-time and don't have to be pre-downloaded. That's the beauty of it! But of course Arial is still a good default.
- natesm 15y ago
  "Helvetica Neue", Helvetica, Arial is a better default! Show the good one to those of us that have it (all Mac OS X and iOS users).
  - wahnfrieden 15y ago
    Helvetica usually looks like shit on Windows if the user happens to have it. So you might try a different order, or just rely on most Mac users having Helvetica Neue.
notJim 15y ago
You can embed font declarations in CSS (the @font-face declaration), specifying a path to a download. The browser will download the font and show it on web pages with the declaration. Google offers an array of freely-available (open source, actually, I think, but I'm not 100% sure) fonts that are hosted on their servers that you can use.
- jackpirate 15y ago
  That makes a lot more sense... I'm a little behind the times I guess with my CSS.
- ethereal 15y ago
  > (open source, actually, I think, but I'm not 100% sure) To quote from the "introduction" dialog [0]: "Hundreds of free, open-source fonts optimized for the web". Looking further, the "about" page [1] provides a bit more information: "All the Google web fonts are open source. That means that you are free to to use them in any way you want, independent of whether you're working on a private or commercial project." I'm not sure what license they're using, though . . . I can't find anything but Google's standard "terms of service" license anywhere on the site. [0] http://www.google.com/webfonts/v2#HomePlace:home http://www.google.com/webfonts/v2#HomePlace:home [1] http://www.google.com/webfonts/v2#AboutPlace:about http://www.google.com/webfonts/v2#AboutPlace:about
  - elwin 15y ago
    The licenses are on the individual fonts' pages (try the "Pop Out" links.) Most of them are under the SIL Open Font License.

cdcarter 15y ago

This is fantastic! I've been waiting and waiting for Web Fonts to expand, and now I have a lot more choices than Syncopate and Raleway.

StacyC 15y ago
As if we need more than two fonts!
eps 15y ago
Don't pop the champagne just yet. Virtually all fonts listed in Google's directory render poorly on Windows in larger pixel sizes. This is caused by the lack of ClearType-specific hinting in these fonts, and it leads to the appearance of so-called "nipples" - odd pixels sticking out at the top and the bottom of glyphs and from thin horizontal strokes. More bad news is that properly hinting fonts for ClearType is a relatively expensive process, and very few foundries do it even for commercial fonts. Unless Google goes beyond simply listing fonts and starts cutting cheques to polish them, these fonts will remain largely unusable for Windows' audiences.
- cdcarter 15y ago
  Interesting! Too bad Google doesn't list that limitation, eh? Since I don't have a Windows machine to access right now, what size is "larger pixel sizes?" I'd like to know what I'm working with.
  - gimpf 15y ago
    It is already clearly recognizable at the default font size.
- ZeroGravitas 15y ago
  At I/O they seemed to be talking about some automated hinting process to try and fix this. It won't be as good a something hand-hinted by a professional but it might be good enough for some uses.

201studio 15y ago

How many awesome things can Google roll out in a day?

JakeSc 15y ago
I'm blown away. Happy Tau Day!
shii 15y ago
They tend to do this. They'll be sorta quiet for awhile and then boom boom boom, nonstop shipping of products and improvements released to the public and lots of press coverage and light on them.

tobobo 15y ago

Wow - I've never seen a cleaner font browsing interface, and they make using the fonts you look at so easy I didn't even realize I was doing it. Let's hope the Web Fonts API doesn't go the way of the Translate API, or many webpages will be rendered in incorrect fonts. Horror!!

beck5 15y ago
Not quite the same load. Google fonts is more like Google Libraries than translate.

thedjpetersen 15y ago

Shoot right after I wrote this too... https://github.com/thedjpetersen/Google-Font-Api-Scraper https://github.com/thedjpetersen/Google-Font-Api-Scraper

jonursenbach 15y ago
At least you probably learned something while making it so it wasn't time wasted.

hsmyers 15y ago

Keeps getting better with each iteration! That said, I'd still like to see some pi fonts and printer's ornaments...

habitatforus 15y ago

Judging by the other comments, it's just me, but the fonts look worse now. They aren't smooth at all. Why?

sad_hacker 15y ago
I noticed the same... they have never been smooth on Firefox (Windows 7 64bit), but now they aren't even smooth in IE... can anyone else confirm that?
aik 15y ago
Most other comments are commenting on the interface, which is definitely great and impressive. As for the fonts, they're not smooth for me either.
XLcommerce 15y ago
Cleartype wreaks havoc on webfonts. Turning it off gives you smooth fonts, but jaggy regular text >:| Strangely IE6 (and 7? i think) are OK even with cleartype on. There is a css hack to get font smoothing on windows: h1{ text-shadow: 0 0 0 rgba(0,0,0,0.0001); /* Transparent Shadow make some kind of webkit font smoothing kick in */ }
- habitatforus 15y ago
  I turned Cleartype off and that helped. The text shadow trick helped as well. I would have thought that using Chrome would mean that Google's fonts would have displayed correctly, but I guess Cleartype overrides that. I miss the day when testing a website meant using just IE and Netscape -- now I have to turn Cleartype on and off ... ugh
- uptown 15y ago
  Thanks for that hack. I'd never seen that one before but font smoothing on Windows has always driven me nuts.

StacyC 15y ago

Nice improvement to the interface. I've just recently started using these fonts a bit and I really like the service. The collection is growing too so there's a good variety there. Nice job, Google.

cageface 15y ago
I went to Google fonts yesterday for a design project for the first time in at least a year and was very happy to see how much the collection has grown. This new interface is icing on the cake. Making these fonts so easy to use really opens the doors to much more creative and effective use of type on the web.

thematt 15y ago

Great interface, but the number of fonts is a bit overwhelming to browse through. It would be awesome if you could sort by "most downloaded" or "most used" -- just to get some ideas.

callmeed 15y ago
Strange, the old interface had a sort by "trending" which is sort of what you're looking for. Not sure why it was removed.

lautenbach 15y ago

anyone have experience using this after typekit? we've been somewhat disappointed with the inconsistency of typekit's rendering lately and are looking for another option...

theatrus2 15y ago

Didact Gothic is a nice one for headlines.

abhaga 15y ago

I wish they would add Indic scripts too!

ThomPete 15y ago

This has several flaws. For it's not consistent. I filtered for Serif and got sans serif in the mix. But even worse. You can't specify very precisely. For instance if I need a slab serif how do I filter that?

ya3r 15y ago

They once had some Arabic fonts. Where did they go? http://i.imgur.com/L5hSF.png http://i.imgur.com/L5hSF.png This is a snapshot of their IO's session video.

callahad 15y ago
I don't think those were ever publicly available -- probably an internal test. I still had a Google Web Fonts tab open from last night, and it only shows options for Cyrillic, Greek, Khmer, and Latin: http://i.imgur.com/T3sh5.png http://i.imgur.com/T3sh5.png

scottseaward 15y ago

I like this a lot. I'd love to see a monospace fonts filter. Although, saying that, it looks to my eye like the only monospace font on there is Inconsolata.

rglover 15y ago

This is a great update to their existing library. It reminds me a lot of Fontcase and similar font browsing apps. It's great to see that their library keeps growing. Definitely going to make this a first-stop before working on designs from here on out. Thanks, Google.

JCB_K 15y ago

I still don't see the point of a service like this. With a tiny bit more work you have them on your own server, and you have all the control. If Google tomorrow decides to stop serving fonts, your design won't be broken. With some services I understand people rather have it externally has it's a hassle to do it yourself, but @font-face is too easy to not do it.

Jach 15y ago
Note they let you download the .ttf's... But the idea is the same as using google apis for things like jquery. It lets you prototype quickly without having to load a new font on your server every time you want to test something different, if this gets popular and you're using a popular font chances are it'll already be in the user's browser cache, and most importantly from my perspective there isn't any ambiguity with this list as to which fonts I can and can't legally redistribute. Obviously don't count on Google to always be there for you.
deleted 15y ago
[deleted]