New Google Web Fonts Interface | Hacker News Reader

New Google Web Fonts Interface

google.com

307 pointsjamesjyu46 comments

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!!

Not quite the same load. Google fonts is more like Google Libraries than translate.

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

I'm blown away. Happy Tau Day!

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.

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.

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

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

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

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.

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.

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.

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.

As if we need more than two fonts!

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.

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.

It is already clearly recognizable at the default font size.

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.

FontSpring uses auto-hinting [1], which is a well-known approach and it is a step forward. It still though vastly inferior to manual hinting and tends to produce artifacts of other kinds. Also there appears to be no ClearType-specific version of it at the moment.

[1] http://www.fontspring.com/fontface - first table, 3rd row down

Typekit seems to be trying to get foundries to care about this, every now and then types get improved, like this: http://blog.typekit.com/2011/03/16/skolar-web-hinted-for-bet...

Maybe it's Windows that should change?

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?

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

Why?

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?

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.

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 */ }

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

Thanks for that hack. I'd never seen that one before but font smoothing on Windows has always driven me nuts.

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.

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.

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.

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

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.

They once had some Arabic fonts. Where did they go?

http://i.imgur.com/L5hSF.png

This is a snapshot of their IO's session video.

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

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

Didact Gothic is a nice one for headlines.

I wish they would add Indic scripts too!

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

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.

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

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.

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.

That makes a lot more sense... I'm a little behind the times I guess with my CSS.

> (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

[1] http://www.google.com/webfonts/v2#AboutPlace:about

The licenses are on the individual fonts' pages (try the "Pop Out" links.) Most of them are under the SIL Open Font License.

Reply on news.ycombinator.com