Google Fonts Redesigned | Hacker News Reader

Google Fonts Redesigned

fonts.google.com

550 pointsuptown258 comments

Open articleView on HN

If anyone is curious about the sample text:

* "All their equipment and instruments are alive." (Mr. Spaceship, by Philip K. Dick)

* "A red flair silhouetted the jagged edge of a wing." (The Jewels of Aptor, by Samuel R. Delany)

* "I watched the storm, so beautiful yet terrific." (Frankenstein, by Mary Shelley)

* "Almost before we knew it, we had left the ground." (A Trip to Venus, by John Munro)

* "A shining crescent far beneath the flying vessel." (Triplanetary, by E. E. Smith)

* "It was going to be a lonely trip back." (Youth by Isaac Asimov)

* "Mist enveloped the ship three hours out from port." (The Jewels of Aptor, by Samuel R. Delany)

* "My two natures had memory in common." (Strange Case of Dr Jekyll and Mr Hyde, by Robert Louis Stevenson)

* "Silver mist suffused the deck of the ship." (The Jewels of Aptor, by Samuel R. Delany)

* "The face of the moon was in shadow." (Mr. Spaceship, by Philip K. Dick)

* "She stared through the window at the stars." (The Millionaire's Convenient Bride, by Catherine George) ????

* "The recorded voice scratched in the speaker." (Deathworld, by Harry Harrison)

* "The sky was cloudless and of a deep dark blue." (A Trip to Venus, by John Munro)

* "The spectacle before us was indeed sublime." (A Trip to Venus, by John Munro)

* "Then came the night of the first falling star." (The War of the Worlds, H. G. Wells)

* "Waves flung themselves at the blue evening." (The Jewels of Aptor, by Samuel R. Delany)

The first one on the list had convinced me this was a very interestingly-trained Markov chain generator. I need to read more Philip K. Dick.

Who still remembers MegaHal?

https://megahal.alioth.debian.org/

Some of my favorites:

COULD SHAKE MY TINY FIST AND SWEAR I WASN'T WRONG, BUT WHAT'S THE SENSE IN ARGUING WHEN YOU'RE MUCH TOO BUSY RETURNING TO THE LAVATORY.

AMAZING GRACE, HOW SWEET THE SOUND OF ONE OR MORE NUMBERS REPRESENTED IN DIGITAL FORM.

SATAN GUIDES US TELEPATHICLY THROUGH RECTAL THERMOMETERS. WHY DO YOU THINK ABOUT META-REASONING?

Looking through the "Classic Quotes" list, it's apparent that MegaHAL was a big They Might Be Giants fan.

That's always an appropriate state of mind. And luckily, that story is already in the public domain: http://www.gutenberg.org/ebooks/32522

As are a few others: http://www.gutenberg.org/ebooks/author/33399

There's actually more PD PKD than that, but some of it's only available as scans rather than text. And some of his works has disputed PD status, eg. there was some kind of tussle between the Dick estate and the makers of The Adjustment Bureau over its PD status.

If you want something that reads like a Markov chain output, try reading his Exegesis (basically written after/about his mental breakdown - it's fascinating, but makes his novels look like like reading)

I'm Indian and I'm seeing a lot of Hindi fonts on the front page with lines from Hindi novels as well

Nice little attention to detail!

Those are not lines from hindi novels, rather translations of the lines from the novels, as cited by GP above.

"All their equipment and instruments are alive." as "उनके सभी औज़ार और उपकरण किसी ना किसी स्वरूप में ज़िंदा हैं"

There are also longer texts that you see if you change "Sentence" to "Paragraph". I don't know if they're from elsewhere in the same works or not.

They're from books too. A Trip to Venus and The Time Machine

Refreshing to see something other than lorem ipsum.

Also, lazy dogs who find themselves jumped over by speedy brown foxes.

While being watched by stone human-lions that are adored by birds.

not facetiously, it's like the shortest possible follow-on to a progressively lipogrammatic epistolary fable

How do companies like Google come up with the sample text?

"She stared through the window at the stars" is just too common a phrase :-) A simple google search suggests a hit in atleast 3-4 books.

Seems like there would be one that fits the theme though, no?

There isn't actually many results at all for that exact phrase, as far as I can see. It looks likely that it's a modification of "he stared through the window at the stars", which doesn't occur much more often, but did appear in A Voyage to Arcturus by David Lindsay.

"Your browser is not currently supported. Google Fonts works best on Chrome, Firefox, or Safari."

Google still treating Edge users like trash, I see[0]. Microsoft Edge works fine for the vast majority of websites, and a block like this telling you to get a different browser is incredibly painful. If you tell me I need a different browser, I'm going to find a different company or website to do business with.

[0]Gmail pesters Edge users weekly to switch to Chrome. Unlike other browsers, where pressing 'not interested' causes it to go away permanently, it returns weekly like a bad rash.

At my work we just decided this week that we will no longer support IE or Edge. We won't actively block them (or show a message) and if the site works in those browser then great. But, we won't test in IE or Edge and we won't make any bug fixes just for those browsers. Frankly the number of users using those browsers (low for our site) versus the number of hours required to fix problems with those browsers (high in our experience) makes it a poor business decision to continue to support them. Though, lets face it, some of the decision also come down to a sense of Schadenfreude after all the pain MS gave to web developers for so long. I started as a web developer in 1996 and I'd be delighted if both IE and Edge went away forever.

> I'd be delighted if both IE and Edge went away forever.

To be fair Edge is a pretty solid browser these days, I don't think you can put them on the same league. I've been using it for some time now and other than a slightly different font rendering engine I have yet to find a fault on it; everything works like you would expect in a modern browser. Development wise, we test for Edge ocasionally and so far we haven't come across Edge-specific quirks like the good ol' days of IE.

You mean you haven't found any Edge edge cases?

(Sorry I couldn't help myself)

How Edgey.

Not bad [0]; although still a bit of catching up to do, it's nowhere near as far behind as IE traditionally was. Apparently, Edge is the first desktop browser to support columns properly, which I give it massive props for.

[0] http://caniuse.com/#compare=edge+13,chrome+51

SVG rendering is still wonky, FWIW.

how so?

I recently ran into this. I was putting an SVG into an <img> tag and sized it with CSS. In every other browser, it worked as expected. The SVG filled the space and stretched to the set dimensions. In EDGE, the SVG appeared tiny at the top-left of the space the <img> took up. I could not figure out a way around it. Had to convert it to a PNG. It seems that it handles SVGs as background images just fine.

I use SVGs all the time in Edge, styled appropriately. Edge however considers (as the spec says) that the bounds of the image are at the bounds of the "page" (as Inkscape sees it, in my experience)

I do The Bad Thing™ with inline styling on occasion, but I've had no problems:

Works 100% fine in IE using a layout kit like Marx or Twitter Bootstrap every time.

>Development wise, we test for Edge ocasionally and so far we haven't come across Edge-specific quirks like the good ol' days of IE.

Edge is simply expansive to test for, because at the places where i worked the only windows laptops (that are locked down like Azkaban for obvious reasons) around were those of the sales people. Majority of the developers on linux, where the designers are on macs.

Unless it is actively formalized, Edge ends up not getting a lot of testing with anything we make.

It had some annoying CSS quirks that pissed me off last time I had to deal with compatibility issues.

I mean, that's fair for you to make that business decision, but if I'm a customer of yours and having issues, and I find out you're not supporting me, I'm just going to do business with someone else. And if that's fine with you, it's fine with me too.

Where I work, we need to use IE for many things, and we have exactly one piece of software that requires a different browser. If in the future, I have the opportunity to replace that product with something that also works in IE, I will, without hesitation. Because the frustration caused by the one IE-incompatible software outweighs the benefit it could possibly provide over a competitor.

I have seen plenty of corporate software that was supposed to work with exactly that version of IE. When you were automatically forced to upgrade to a newer version usually nothing worked anymore. In some cases even forcing the compatibility layer. I would rather see that kind of software, developers that produced it and users disappear. In my experience few things are more annoying than an IE specific website. If you are happy with it, then great for you. But I believe that you are the first person that is actually happy to use IE given the aforementioned quirks.

It's not really about being "happy" to use IE. It's about using what does the job.

Am I correct in assuming that you "need to use IE" for software that is incompatible with other browsers?

Yes. Obviously, I'm going to need to use the browser best supported by most of our infrastructure. If that rewards Microsoft's earlier behavior, so be it. I need things to 'just work' for non-technical coworkers.

More and more sites are only tested in Chrome. It's not just Edge that no one cares about, Firefox is becoming a second class browser as well.

Often it's pretty obvious that the authors didn't even try Firefox, because the JavaScript isn't even loading properly.

I regularly have to email SaaS companies and tell them the service I just signed up doesn't work correctly in Firefox.

I use 85% Firefox and I only see issues on experimental stuff. I'm curious, where do you have these issues?

Firefox is a pain to support. Its box model is slightly different than other browser, like shadows take up space and an outline is rendered around the shadow instead of aroubd the border. There are other minor things especially on the drag&drop events (in same window, not from outside) but I can't recall the specific.

Yes. The latest version of Firefox has cache issues. The same in Chrome was working perfectly after a single refresh. Sad. I love Firefox.

Chrome does not obey cache headers on refresh, I think they assume something is wrong if you are hitting the refresh button and fetch all files from the server.

I can't really blame firefox for obeying the headers that the server sent them.

This problem hit me very hard, chrome ignores most headers if a server sends a 304 response for a resource.

For a site I was working on, we issued a change to our CSP headers only to attempt to fix a CSP issue that made it to production, and chrome would not accept the new CSP changes since the HTML body and scripts were unchanged.

Had to include the hash of our headers as an HTML comment to allow this dynamic change to be picked up by chrome.

It's not just Edge users, I get the same constant annoyances with Firefox.

On the computers I use Firefox, I only get it the first time I use Gmail. Then it doesn't return. But on Edge it seems like it's all the time.

And for those who are curious: I submitted feedback about it both with the Submit Feedback button and on the Gmail Help Forum.

Yea, I found that really annoying.

We fixed our Edge bugs, and removed the block. If you see anything strange don't hesitate to report them at https://www.github.com/google/fonts/issues.

Chromium of all browsers gets pestered all the time by Google services. It's... odd.

Google doesn't want you to use Chromium. Use Chrome instead, it's exactly like Chromium but with all the Google bloatware installed!

>with all the Google bloatware installed!

Oh yeah? Like what?

Sorry, does anyone downvoting want to actually explain to me what "bloatware" is "bundled into" Chrome? Or just more errant bullshit that's tacitly accepted because it's anti-Google rhetoric fired from the hip without substance?

Those audio/video codecs... so much bloat! https://chromium.googlesource.com/chromium/src/+/master/docs...

Or maybe you're upset about the "colorful logo" bloat?

I'm thinking about the profile features, Google Cloud Print, the Google Now thing that I think is now gone (not actually sure if I'm not being listed to)... I'm upset with Google because they keep imposing their services/design in an otherwise good browser.

Google Chrome also ships various Google Apps extensions that are enabled by default. No idea why that's not in their documentation.

There isn't Chrome for FreeBSD. When I access google.com/chrome from Firefox under it, it says I needn't download it because my Chromebook does it by own means :) Shall I retry later on?

Which Google services are you talking about? I've been running Chromium for about 6 years as my main browser and I don't remember a site even detecting that it wasn't Chrome, let alone pestering me.

He's probably using Ubuntu. They chose to patch Chromium's user agent to identify as Chromium, not Chrome. Obviously that breaks stuff.

Chromium doesn't contain the commercializatin Chrome does. In other words, they don't make as much money on you if you use the clean version.

Google Inbox is also blocked on Edge, which is sad. I wonder why they're blocking it. As you said, Edge works fine with most websites, it's not IE6...

Service Workers, maybe?

If you change the agent string to Chrome the page will load in IE, but it looks as broken as it is in Firefox for me.

I'm using Inbox in FireFox right now with no issues at all?

My Firefox in OSX is fine, my Firefox in my Win8 VM is not. Really strange.

My Version 6 (OS X 10.8), Safari is rejected as well, I should be using 'Chrome, Firefox, or Safari' apparently. By incrementing the useragent I discovered that it loads and all works just fine when I pretend I'm using Safari 8, there's no 'proceed at your own risk' link so I can only chalk it up to google being dicks.

Particularly since if you spoof the UA in F12 the site works perfectly fine as far as I can tell, although I haven't exercised the entire site. (Disclaimer - on latest public Win 10 build, 14361)

It's fair play after the IE-ification of the web before that.

Is it? The complaint at the time was the number of websites that outright blocked non-IE browsers rather than just letting the non-IE browsers try their best to render the pages, closing the web. Just because the tables are now turned it's appropriate for Google to break the open web? It seems evil from the standpoint of trying to support an open web (the arguments are the same now as they were back then), and it seems peculiarly childish and immature for a company as big as Google.

Not to mention if you were going to do it based on standards support and caniuse.com statistics, it's Safari now that is the one that lags behind. Shouldn't Google also start blocking Safari now? Isn't that closer to "fair play"?

works on Firefox and Safari as well as Chrome. There's a difference between the old-school Microsoft efforts to break competitors and current efforts to support a (popular) subset of browsers.

But the point is that with current standards, things that work on Firefox, Safari, and Chrome just work on Edge. It's extra effort on Google's part to throw up "not supported" banners and pretend like Edge is the worst scum and villainy on the planet. It's a terrible marketing effort disguised as "building a better web" and it's doing a disservice to the open web, modern standards, and basic common sense "do the right thing".

How is not devoting time to supporting a proprietary browser doing a disservice to the open web?

Because an open web means the freedom to choose which browser you want to use. Even if that choice happens to be proprietary. Please remember that with the Internet of things, more and more devices will be running closed or non-upgradable browsers, from games consoles and smart TVs through to portable gadgets.

Sounds like parent is saying Google is spending time to deliberately block/not support Edge.

How much time would they have to spend with support requests if they don't spend the small amount of time required to tell people to use something else? I understand your point, but I personally don't care about proprietary software not working with certain websites -- they chose to make it their problem alone. It sucks that Google isn't choosing to not support them because of _that_, it's because they've had bad experiences with old IE implementations of standards.

1) Google generally doesn't answer support requests, they let a random Google Group handle it for "community support". (Unless you are an Apps customer in which case you might expect a reply somewhere between a week and a two years later, and it's still recommended you try the "community support" first.)

2) This isn't a "We won't support you, use at your own risk" banner, this is a Chrome ad. It's a Chrome ad disguised as a support banner. It's a Chrome ad that is designed to get ignorant users to install Chrome out of some fear. This is no better than those "Your computer is unprotected, install this fake anti-virus to fix your computer" malware ads you see everywhere! Sure, maybe Chrome isn't malware to you, but it's unneeded confusion to, say, my grandmother, to have her browser suddenly change because she installed a thing Google told she had to to stay "supported"...

3) This is a case of "Proprietary" versus "Proprietary" on Windows: Chromium is open, Chrome is not and especially on Windows has adware and custom extensions that are fairly opaque and proprietary. On the other side of the fence: Edge's JS engine (Chakra) is open source and community developed, and Edge's WebGL renderer just became open source. Edge is already more open and standards compliant than IE ever was. Blaming Edge for IE's old problems is like kicking your new puppy for things your recently deceased dog did.

4) Yes, as a web developer, I remember bad experiences with IE's implementations of standards, but unlike some I also remember some of the good experiences. I also am aware enough as a web developer to know that IE's "bad" implementations helped make the standards better. Plenty of people can talk about how IE contributed XHR and AJAX. Another example is that "box-sizing: border-box" you see littered throughout CSS these days is "Hey, use the modern version of the classic IE way because it is easier to math." The point of the "Open Web" is not that "mistakes shouldn't happen and standards should be implemented in lockstep", it's that anyone can and should implement the standards and when the implementations don't agree we use that to make the standards better! Chrome owes a legacy to IE, and "bad experiences in the past" don't outweigh the benefit to the Open Web today by not interfering with users that choose to use Edge regardless of whether or not that's simply because it is Windows' default browser.

Since when did Google accept support requests for their broken websites? o_o

> Not to mention if you were going to do it based on standards support and caniuse.com statistics, it's Safari now that is the one that lags behind.

It is?

http://caniuse.com/#compare=edge+14,firefox+50,chrome+54,saf...

Skimming it, Safari seems to do a bit better than Edge if you just count boxes; at any rate it's not significantly worse.

More specifically, I meant iOS Safari, which seems to lag wildly behind Desktop Safari. Plus, iOS Safari has a much bigger userbase than Desktop Safari, which you see in the "Usage Relative" views on caniuse.com.

That said, it was also a dumb joke. :) I do not recommend adding banners saying "This site is not supported on iOS Safari". Imagine how many users you would anger doing that.

It doesn't matter if it's "fair" - I don't want Chromification to become the new IE-ification. Vendor lock-in is always bad.

That was the old IE. Edge is a whole new browser and management has changed since ballmer era. It's like punishing current generation of Germans because of hitler.

Comparing IE to hitler - be fair, he wasn't that evil.

Someone trots out Hitler analogy #879274032890, and it's the poster who at least turns it into a laugh who gets downvoted?

Edit: And this post downvoted within seconds. What a fucking joke this place is thanks to assholes abusing their karma. (If I'm going to be downvoted, it may as well be for something real.)

Who, Hitler?

I don't think Chromification is any better.

Indeed, in 2016 requiring IE can be forgiven as a symptom of Microsoft captivity and/or being behind the times, while requiring Chrome is a proud proclamation of some mixture of not caring about standards, not caring about UX, not caring about users, not caring about proper web design (in order to avoid proprietary features), and being an ignorant and arrogant Google fanboy.

It's strange too, because if you are building a production-ready (i.e., not a proof-of-concept demo using bleeding edge technologies supported in only one browser) website or webapplication, the bare minimum level of browser support that grants you a very modern set of features you can depend on is to only support up-to-date evergreen browsers. That means Chrome/Chromium, Edge, and Firefox.

I can get dropping Edge if you are an individual developer and simply don't have any Windows machines around (testing websites from a VM really sucks), but going Chrome-only pushes us back to the monopoly position that harmed our field so much in the first place.

Actively moving towards a webkit-monoculture ultimately harms our profession.

This is a gorgeous redesign that really lets the typography shine, as well as deftly addressing numerous usability issues with the old site. The family size filter in particular makes finding a usable set of weights much easier, and the featured section adds a welcome new layer of curation.

Two minor observations:

- It would be a great addition to the family size slider to be able to filter for "contains italics." Some font families have a broad set of stroke weights, but aren't usable for certain content because they lack italics.

- A nitpick, but "Handwriting" has always seemed a somewhat suboptimal filter label. Many of the fonts contained therein might be better described as "script" or "calligraphic", while "handwriting" connotes something more strictly vernacular.

All said, this is an excellent update that brings the Google Fonts experience into the realm of subscription services like Typekit.

Are you using chrome? It looks pretty dumb in firefox.

It looks like this.

http://imgur.com/IT7x83h

Chrome and Firefox look exactly the same to me

edit: from your comment below, maybe you're on Linux? Sounds like you're seeing the same thing as this subthread: https://news.ycombinator.com/item?id=11903444

That is what I see also. FF on Linux.

Confirmed, Firefox on Ubuntu. There are no errors in the console. I wonder if it's some add on playing bad with that site. It's not the fonts because all the web will be like that.

ah, thanks for saving me from the trouble, Fx on Linux here as well :D

Looks the same in Chrome.

Whoever downvoted you is apparently thinking that it not being broken on his Linux Chrome means you're wrong. Well, I also run Linux, and on Chrome it's just as broken for me as well:

https://i.sli.mg/tu1UJG.png

Looks great in Chrome, completely broken in Firefox: https://i.imgur.com/XRMgcHp.png.

I get the same in every browser I try on Linux.

I don't get the point of this. I really don't. While far from perfect, web fonts have largely been a solved problem for a while now, so why are Google reinventing this wheel? This seems to happen all the time with the web; people taking old ideas and reinventing them again and again, in yet more bloated ways, breaking things for millions.

</grumpy rant>

I don't think they're reinventing anything. Google Fonts has been offering webfonts for many years. All they did here was change the website.

They've changed their "typeface rendering engine" (for want a better description). Hence why many people are now unable to see their typefaces in full when once they could.

Not every browser on Ubuntu 16.04: Firefox displays those boxes but Vivaldi, Opera and Chromium work fine.

Google might have fixed some of the issues now - it was a day ago many of the bug were raised.

Just for reference, I was running ArchLinux with the Infinality font bungles.

It's fixed now. Thanks!

I didn't have the infinality fonts. I wonder what the bug was.

Oh, don't worry. Looks amazing in Chrome

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

I got that with IE and Opera also. /sigh, does not bode well for using those font's if the font site is broken.

Hey SEMW,

Sorry about that. The missing character detection can be a little finicky. Can I get a browser version / OS?

Heya. Other people have already replied with versions it fails on, but for completeness, I'm on Firefox 47.0 (package version: 47.0+build3-0ubuntu0.16.04.1) on Ubuntu 16.04.

Thanks. Looks like Linux needs some love. We'll be fixing this up asap.

FYI, same thing in firefox-47.0-4 in Fedora 23. Works fine in google-chrome-stable-51.0.2704.84-1.

Arch Linux user reporting in. Works fine in… uh… latest chromium (51.0.2704.84-1) and there are blocks in ff (47.0-1). Epiphany (3.20.2-1) horribly crashes, so bad even dev tools stop working.

I use infinality-bundle fontconfig preset.

I have same issue in Chromium 51.0.2704.84, Arch Linux. I don't have google fonts installed, is that necessary?

No, it is not necessary.

We'll take a look.

We didn't have a chance to test specifically on Arch, but we think we got it. Let us know if it works out.

I have the same issue as SEMW on firefox 47 / archlinux

I'm seeing the same issue on Firefox 45.2.0esr on Debian.

I'm on Edge, scotth, can you unblock my browser?

Yep. We have it in the works. Some bugs came up before launch that we didn't have a chance to get to, but it's coming.

Firefox 47 Ubuntu also looks like that. Sad.

Firefox 46 on Ubuntu 16.04. Broken both with and without AdBlock (it's many time the source of pain points).

Looks the same for me.

  * Firefox 47
  * Debian unstable
  * freetype 2.6.3
  * fontconfig 2.11

Also broken in Firefox 46.0.1 on Fedora 23, running Gnome 3.18 on Xorg 1.18.3-2/Wayland 1.9.0.

Equally broken for me on Firefox 46.0.1 on Kubuntu 16.04.

I have the same problem, submitted through the feedback thing so you should have a screenshot and all kinds of debug information from me.

Debian testing,

Chromium 49.0.2623.87 built on Debian stretch/sid, running on Debian stretch/sid (64-bit)

Blank white page on Firefox 47.0, OS X El Capitan, cookies disabled.

Fails on Xubuntu 16.04/FF47 as well.

Windows 10 latest, Edge latest

They probably did:

    font-family: Something

Instead of:

    font-family: 'Something'

FF has given me this issue for years.

No, for their "Jaldi" font they simply use:

    font-family: "Jaldi script=latin rev=2"

However, they are replacing what they think is a missing glyph with an image. For example, if I type the letter "r" while keeping the DOM inspector open, I see the text node containing the letter for a moment before it is replaced with an image element:

    <img class="content-editable-missing" data-missing-character="r" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">

This is most likely a javascript bug doing a false negative failed progressive enhancement.

No one tests on firefox anymore, is sad how firefox is being ignored more and more everyday.

This is a Google-specific problem. YouTube Gaming launched only working on Chrome as well. One of Google's web UI frameworks wrapped text by breaking words of any size mid-letter, if you weren't on Chrome for a while. (It would cut "the" if it felt like it during a word wrap.)

My browser, Edge, is simply blocked on Google Fonts.

It seems like Google is more and more dependent on automated testing for all if it's deployments, perhaps since everyone internally uses Chrome, nobody notices when those tests are lacking on other browsers. Google would do well to reintroduce "humans" into their development process, and maybe open their new websites once in each major browser before they push a release.

It's been said that Chrome is the new IE. It sounds like hyperbole until you get bit by it.

This makes sense, because it has also been said that Google is the new Microsoft.

In my department every developer uses a different browser as their primary browser. I only use Firefox, another only uses Chrome and another only uses Safari.

That's a very smart way to enforce ad-hoc testing in every browser. Probably prevents a lot of "works on my machine" issues.

I've worked for companies with no defined browser support, and other clients which required us to test in IE6-9, FF, Chrome, Safari, Mac FF, Mac Chrome, Mac Safari. It took FOREVER, so we ended up automating a lot of it.

From my experience with front-end dev's it's not that they don't test in Firefox but rather they only test in Chrome. I've worked with FE devs who insisted it was unreasonable to expect them to test in all the major browsers.

Web devs as a group seem to be ridiculous. Note this doesn't mean everyone just a greater incidence of such.

This issue should now be resolved. Thanks for the report.

Don't hesitate to add issues to https://www.github.com/google/fonts/issues if you see any other strangeness.

I see the same thing in Chrome 51.0.2704.84 m, Windows 10.

I noticed my font rendering in Chrome started to be terrible a couple of days ago, so might be on me.

Hmm, Windows update + restart seems to have fixed the font rendering in general, but this page still looks the same.

Amazingly, Firefox on Android is fine.

Pfiou I thought I had some issues with fonts again when I opened it on Firefox

Getting nothing but a blank page in Firefox.

On the console there's this:

21:07:34.420 Error: The operation is insecure. Fc@java/com/google/fonts/directory/ui/app_js.js:78:634 l/<.instantiate@java/com/google/fonts/directory/ui/angular_js.js:36:424 Zb/v.$provide.service</<@java/com/google/fonts/directory/ui/angular_js.js:37:182 l/<.invoke@java/com/google/fonts/directory/ui/angular_js.js:36:321 e/<@java/com/google/fonts/directory/ui/angular_js.js:33:486 l/<.invoke@java/com/google/fonts/directory/ui/angular_js.js:36:321 Zb/cb<@java/com/google/fonts/directory/ui/angular_js.js:38:93 d@java/com/google/fonts/directory/ui/angular_js.js:35:294 e@java/com/google/fonts/directory/ui/angular_js.js:36:1 l/<.invoke@java/com/google/fonts/directory/ui/angular_js.js:36:111 bf/this.$get</</<@java/com/google/fonts/directory/ui/angular_js.js:84:434 t@java/com/google/fonts/directory/ui/angular_js.js:59:434 h@java/com/google/fonts/directory/ui/angular_js.js:53:339 H/<@java/com/google/fonts/directory/ui/angular_js.js:52:482 jc/c/</<@java/com/google/fonts/directory/ui/angular_js.js:16:99 qf/this.$get</t.prototype.$eval@java/com/google/fonts/directory/ui/angular_js.js:140:215 qf/this.$get</t.prototype.$apply@java/com/google/fonts/directory/ui/angular_js.js:140:447 jc/c/<@java/com/google/fonts/directory/ui/angular_js.js:16:57 l/<.invoke@java/com/google/fonts/directory/ui/angular_js.js:36:321 jc/c@java/com/google/fonts/directory/ui/angular_js.js:15:1 jc@java/com/google/fonts/directory/ui/angular_js.js:16:274 Bc@java/com/google/fonts/directory/ui/angular_js.js:15:83 @java/com/google/fonts/directory/ui/angular_js.js:309:165 b@java/com/google/fonts/directory/ui/angular_js.js:183:63 Kf@java/com/google/fonts/directory/ui/angular_js.js:31:474 Jf/d@java/com/google/fonts/directory/ui/angular_js.js:31:423 undefined1 angular_js.js:113:8 e/<() angular_js.js:113 df/this.$get</<() angular_js.js:85 b/<() app_js.js:157 qf/this.$get</t.prototype.$apply() angular_js.js:140 jc/c/<() angular_js.js:16 l/<.invoke() angular_js.js:36 jc/c() angular_js.js:15 jc() angular_js.js:16 Bc() angular_js.js:15 <anonymous> angular_js.js:309 b() angular_js.js:183 Kf() angular_js.js:31 Jf/d() angular_js.js:31

God dammit https://sr.ht/xkFx.png

Never, ever, ever disable functionailty based on someone's user agent. Just let it be broken, because spoiler alert: it's probably usable anyway.

Thank you, Sir, for letting me in on qutebrowser. Being a VIM and I3 user myself, I'll give it a try and look forward to the enjoyment of a simple, yet modern browser.

Plus, I agree with your sentiment.

I disagree. If the team knows for sure that this will look terrible on less popular browsers, then it's probably not worth the PR blow of running a faulty product. This way, 'it works as intended'.

If you must, put a warning page in place that tells users they proceed at their own risk. Completely locking them out based on their user agent is a crappy thing to do.

This redesign is awesome, but I think it might have killed my side project.

I’ve been working on a site that offers google fonts with better visuals and search by font feature (x-height, stroke contrast, etc) functionality.

Sunk 30+ hours into it designing + coding up the front end while my friend works on programmatically tagging the font on the backend.

I want to continue working on my project, but it now feels a lot less relevant. Any advice, HN?

For the curious, here's a wireframe of the main screen:https://www.dropbox.com/s/vzobxm2a2ul9y5l/main%20search.png?...

IMHO, if Google has scratched your itch, then I think I would find something else that needs to be done.

I'd love to see a search interface for all webfonts, powered by an open database of data from across all the major webfont providers. If this interface is independent of Google fonts, then you can apply it to any set of font data.

You could generalize the tool, so it also works for other fonts?

That's a good idea. I'd have to look into how to get copies of licensed fonts to analyze. Actually paying for a license would make this project completely unfeasible.

If you get the basic product up and running, I'm guessing the foundries might give you a license just because you might be able to drive some business to them. There may even be an affiliate angle that could be worked.

This is nice and all (apart from an astonishing—even for Google—degree of browser compatibility regression), but what I really want is for the actual fonts to be updated. Crimson Text, for example, is an outdated version of the font, which it breaks a little further too. Upstream (https://github.com/skosch/Crimson) has seen substantial improvements, but Google has never updated it, ignoring the author’s pleas.

> …Google has never updated it, ignoring the author’s pleas.

It looks like the source repo is at https://github.com/google/fonts — has he tried a pull request? If not, maybe we can help with updates until they make it friendlier for less-technical creators.

Hear, hear :)

Same for many others, e.g. Montserrat or many of Vernon Adam's designs. That being said, I find the redesign wonderful and long overdue. Maybe now they'll find the time to update their collection.

Any suggestions on finding the latest, greatest versions of these fonts?

For example, I found what appears to be the home page of Monsterrat (http://montserrat.zkysky.com.ar/en) but it directs me to Google Fonts. Similarly, I searched for "vernon adams fonts" and I don't see what looks like a canonical page for them.

Brick.im[1] hosts free fonts on Fastly's CDN. Fonts are directly converted from their sources to .woff only; doesn't support other font formats. No subsetting means the fonts can be very large, especially those with full OpenType features.

Most of the fonts are of the latest version though. Fonts not included in Google Fonts, like Linux Libertine/Biolinum, Aileron, and Heuristica are included.

If you don't mind the performance hit, you can use it.

[1]: http://brick.im

EDIT: As for where you can find the new versions of the fonts, you can browse through brick.im's Font repository[2] and click on the `SOURCE` files.

The new Montserrat versions are located here: https://github.com/JulietaUla/Montserrat/

[2]: https://github.com/alfredxing/brick/tree/gh-pages/_fonts

Many thanks! Brick looks like a great resource, and it's great to have the latest Montserrat.

I kept looking at the fonts to see what changes they made. Then I realized that the website was redesigned, not the fonts. Perhaps the title should be changed to reflect this?

sounded correct to me. You just misunderstood, undrstandable. "Google Font" is the name of the product. If the title was "Google's fonts redesigned", then I'd agree.

Todd Motto did a bit of an analysis of the client-side, angular performance: https://mobile.twitter.com/toddmotto/status/7427897282573557...

"Google Fonts is doing some amazing work on performance, no ng-repeats - superfast DOM rendering. "

Is that Angular 1 or Angular 2?

Looks like Angular 1.

How to make Angular faster: don't use it.

Why does Google deliberately ensure that their websites don't work with Microsoft browsers?

Yeah, that is pretty obnoxious. Doesn't work with Microsoft Edge or Explorer 11.

Google does not have to care about them. They can use a Chrome if they really want to use Google websites.

I'm not sure how I feel about all these different phrases. I think it's easier to pick out which font I like when all the phrases are the same. The phrase "the quick brown fox jumps over the lazy dog" had been a great one because it contains every character in the alphabet so you can see how every letter will look at once.

Agreed. Although you can also type in a phrase of your own choosing and click "Apply to All" and it will.

I still have the same problem I had with the old UI: The only reason I come to this site to get the copy/paste one liner to put a certain font on my site, but every time it takes me a few minutes to find it

1. Click a font's plus icon

2. Click on "1 Family Selected"

3. Copy the embed link from the dialog.

How is that hard?

Once you know what to do, it's easy, but it's not immediately obvious that you need to "Select" a font in order to use it (as opposed to, say, clicking through to its page), or that clicking on the notification would do anything.

This was my point. It's just not intuitive, and I only use the site once every few months, so I have to figure it out again every time.

I agree. Even clicking the plus icon suggests there'll be more than one type family resource (something you'd want to avoid by default).

Very hard.

Why would I click on a notification dialog to produce/obtain something? This workflow makes no sense.

It looks like mad libs to me with all these little boxes in place of some of the letters. This appear to be little input boxes. You can grab and resize the box but it snaps back, you can also type in the box but it is quickly erased.

Super ridiculous.

Mine only happens with the letter "i" or "I"... very weird.

Minor criticism: the characters preview is a bit of a mess. Two issues:

1) You're missing important non-ASCII characters which I know are in some of these fonts (such as Open Sans). These include German and Scandinavian characters like ü ä ö æ ø å ß (maybe more).

2) The ordering is non-standard and makes it hard to see what is actually there and not.

Why are loads of the letters replaced by empty boxes ? Is this a gameshow reference?

http://imgur.com/CY0yv4R

Getting the same thing in Firefox. Works in Chromium though. Is this site still in beta?

Same thing in Firefox under Linux. Even on the same characters.

Can someone explain to me why Google Fonts doesn't provide proper cache headers, still?

https://stackoverflow.com/questions/29091014/how-do-i-levera...

Why disallow caching? Unless I'm misunderstanding something.

They do provide proper cache headers. They cache the CSS for 1 day. The actual font files are cached for a lot longer than that.

The reason for shorter cache periods for CSS is that Google are continually making improvements. The font files are different e.g. for Mac vs Windows because they are optimized for platforms.

In general you will find that all URLs that are directly called from millions of websites (e.g. facebook SDK, Google Analytics snippet) have short TTLs. Makes sense when you think about it -- 3rd parties providing these resources need a way to stay agile and ship new versions without forcing millions of websites to upgrade their code.

> They do provide proper cache headers. They cache the CSS for 1 day. The actual font files are cached for a lot longer than that.

I don't see it, not with curl at least.

Looks like actual fonts are cached for a year.

But not CSS,

> curl https://fonts.googleapis.com/css?family=Open+Sans -i

expires:Tue, 14 Jun 2016 19:02:03 GMT

date:Tue, 14 Jun 2016 19:02:03 GMT

At the very least they should allow to control that with another query parameter.

Expires is a HTTP/1.0 header, Cache-Control is HTTP/1.1 and used by anything created in the last 10-15 years. Most sites set the Expires header similar to their Cache-Control max-age, but I guess Google just doesn't care and it doesn't really matter anyway.

You might be right, but what I see in the browser dev tools is that my page always gets the CSS from Google Fonts and that does matter to me.

It loads from the cache in Chrome, Firefox, Safari, IE, and Edge for me.

Really dislike the ng-click navigation for opening individual font pages. Those clickable elements should be anchors, to allow opening the pages in new tabs.

There doesn't seem to be any usability case for breaking a basic browsing convention here.

this is an update i didn't know i wanted. so many great little UX improvements to my workflow.

an interesting aside, they now have the ability to toggle the background (and font color). the presets are (black on white, white on black) interestingly, one of the presets is black on yellow. i didn't realize this was such a a popular of a text/bg combination.

It's popular for display fonts and large headlines, there's been an influence of Swedish graphic design into the web lately and that's a common combination. Pretty effective for titles and headers with bold fonts.

Lovely redesign that addresses usability complaints I had with the old version. In fact I built my own search tool for Google Fonts a few months back because of these issues:

http://fontcdn.org

Some of my critiques of the old version:

http://thomaspark.co/2015/08/a-better-way-to-search-google-f...

I just wondered why it is laggy when I scroll the page down quickly and inspected the network activity.

6 times scrolling ends up with 210 new requests. really? Is this really needed or can't it be improved easily with bigger range of pagination size?

I have to wonder, is this some kind of a joke? https://jeena.net/s/google-fonts.png

Same issue in Chrome 51, Ubuntu 14.04.

Isn't it counterintuitive that there are two scroll next to each other for smaller screens? And also that the one on the right is to scroll the content on the left, while the one on the left is to scroll the content on the right.

http://imgur.com/x9BMjmR

Firefox on Ubuntu:

http://imgur.com/IpauSTs

I congratulate the Google Fonts team The redesign job looks gorgeous and elegant in terms of UI and UX too but can I make a few suggestions if possible?

1- Can you please add a double view button at the top to toggle between «List» and «Grid» views for maximum convenience?

2- At the risk of sounding a bit pedantic but some example sentences for the Arabic fonts don't look perfect.

For example, for the «Amiri» font, it's الظلال أخفت القمر or more naturally أخفت الظلال القمر and not الظلال أخفى القمر [1]. For «Lateef» and without going over a lot of MSA grammatical rules, this is the more correct version of the example sentence انطلق صوتُ مسجّل عبر مكبِّر الصوت المنصوب أعلى الباب. [2]

[1] The shades hid the moon.

[2] A recorded voice went off through a megaphone/speaker mounted above the door.

Very good, but needs a option for resizing. I've tried looking at monospaced fonts and couldn't see them at a size that a monospaced font would actually be used (default is huge).

You can select a size for a given font by hovering over it to reveal the size slider and other options (desktop version at least), and then applying the size to all.

The font size slider is incredibly annoying. There should at least be a field to manually input a size as well. Having fonts jump from 8px - 22px with no space between is useless.

Doesn't jump for me. I also notice that if you click the slider, left and right arrow keys change the size by 1px.

Hover over one and you should see a slider to resize. You can then hit "apply to all."

That being said, I wish there were options to jump to some "standard" sizes.

I would love if they released the server logic that chose which file to include.

With http/2 I'd like to host the files so that they are served from the same origin, I'd also like to cache the CSS longer than a day.

At the moment I hit two domains (and I preconnect) to try and speed this up:

    <link rel="preconnect" href="https://fonts.googleapis">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Then in my CSS I import:

    @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Merriweather:400,400italic,700italic,700);

That URL loads:

1. More fonts than I need.

2. Different font files depending on... useragent?

I'd prefer to self-host so that I could user http/2 server push for new sessions, and so that I could extend the caching.

The same origin via http/2 would accelerate all of the connections, and removing the need for the additional TLS connection to 2 Google properties will speed it up too.

These are about my only criticisms of Google fonts, that the little bit to make it really useful for those who want webfonts and performance is the bit that's hidden.

The page has an interesting bug with some special characters... it will initially accept it, showing it in a different font, and then it will change to an empty box. I tried a few, such as ™ (trademark) or ∞ (infinity) and they don't show up on the initial overview page, but if you click on the see specimen link you can type the same characters and see that the font does have them defined.

fonts.google*.com is similar to the Facebook "Like" button.

Google effort to inject themselves into websites that may have nothing to do with Google, read by users who may not even use Google.

Users may be far from Google search engine page or any Google controlled subsidiary Blogger, etc., yet their Google-authored? browser is still connecting to Google.

These Google font domains are among the many useless and annoying domains I block.

I remember the days when another large company was pushing "Web fonts". They asked the user to "install" the fonts; there was no "font server" and incessant phoning home.

Today that company forces 10GB+ downloads of their "updated" OS on users without unequivocal consent. The stories of systems crashing in Africa under the load and network admins puzzling over the effects of massive Windows Update traffic in Australia have been amusing.

Keep up the great work guys. Those "web fonts" are really amazing!

These all look really bad on my Win 10 + Chrome machine. It's like the clear type settings aren't working right? Every font has a very fuzzy/blurry edge. Really weird. It's almost like it's rendering small and blowing up. Rather than rendering large and anti-aliasing.

Maybe something is wrong with my PC?

Are these free to use? Open and permissive license? Should be the first thing that was mentioned on the site.

Yes. It's on the about page.

https://fonts.google.com/about

> All the fonts in our catalog are free and open source, making beautiful type accessible to anyone for any project. This means you can share favorites and collaborate easily with friends and colleagues. Google Fonts takes care of all the licensing and hosting, ensuring that the latest and greatest version of any font is available to everyone.

This is kinda funny given this comment: https://news.ycombinator.com/item?id=11906170

Beautiful redesign! Very cool functionality with the inline editor and contextually revealed selectors.

...but they prevent you from right-clicking to open fonts in a new tab. I can already click into a font by regularly clicking, did they need to override right-click functionality as well?

Very impressive performance loading considering the number of fonts. Curious if they are just loading an incredibly stripped down version of each font for the preview and then lazy loading in the full font if you click to edit the text. Either way thumbs up.

There is still two pages for single font, one such as this:

https://www.google.com/fonts/specimen/Open+Sans

And now this:

https://fonts.google.com/specimen/Open+Sans?query=open+sans

First one always comes up in search results, and is nothing but a link to real page. What gives? This is terrible user experience, if I search for Google fonts, there shouldn't be multiple pages for same font.

I’m not sure why but interfaces that consist only of red and black text look very unpleasant to me. I felt the same way when Apple started using red and black for things like iOS calendar highlights.

I suspect the reason is that they are both strong colors that compete for attention: black-on-white is high contrast and red is a color that generally “jumps out” from the page due to the eye’s perception of red. To keep the colors from competing, one of the text colors should be softer (and if they must have “red”, they should soften it to something that is closer to pastel or pink).

What is wrong with this page ? It looks awful with firefox 47.0 on Ubuntu ! [screen capture](http://imgur.com/hqc6jp2)

Problem disappeared after restarting firefox. You may safely ignore the reported problem.

Still they don't offer any font+css download opportunity in the way that font squirrel does. You have to do it by hand or be stuck with their CDN. How bad.

It's smaller than the big embed info screen, but there's a download button that gives you a zip of your selected fonts in the top right of the "selected fonts" dialog.

Does it give you all the relevant formats (woff/ttf/etc) and the css? If not it's just unuseful.

It's definitely an upgrade compared to the old version, but the fact that it needs a "Try typing directly into the... " hint shows the shortcoming of their UX. I didn't know what it meant, took me a few tries. I think it could be better. The hover of the fields should be more obvious that it's editable at least.

Long overdue and very nice! I would like to filter by OpenType features, though (e.g., serif font with oldstyle figures).

The sliders on the right side should also work (and activate the box left to it) when the box left to it is deactivated.

What is in it for google to give these fonts away? Does it help them track people or learn about sites that use them?

The original story I heard was that it encouraged people to stop using images of text on the web (which used to be a common way to get custom typography in pages). The images of text are hard to index and search because they would require OCR and would lose other possible semantic information that might be present in a textual page. So Google hoped that people would choose to use these fonts and then represent textual information as text rather than as an image. It seems to have worked!

That makes perfect sense. Thanks.

Yes, you hotlink the web font files from their servers. Much like their public DNS servers, their public font registry pays them in data.

Yeah, I assumed this too. They have a reason for every service they offer.

To the Google Fonts dev(s) in this thread: why Angular 1, not 2? Was the previous version already using Angular 1?

I've been waiting since 1995 to have the same sort of tool built into Windows to view my installed fonts.

All these updates and still can't select a range for "thickness", "width", etc.

I can't select 10 px font sizes with the slider on some fonts like "Space Mono." I can with others, and then can click the "Apply to all specimens" to update even the fonts I can't adjust with the slider control.

I'm using Firefox 47.0.

A wonderful update. A useful creation that celebrates type. High-fives are in order.

I wish you could filter fonts based on writing style; take the letter a for instance; there can be so many was to represent the lowercase; to get complementary fonts; it would be nice to filter on those characteristics.

Like this?

1. I hate the lowercase L ("l") looking partly uppercase. 2. Dollar signs need two bars. (single means Mexican peso) 3. Half way up the at sign ("@") must have 4 lines, not 3. 4. The asterisk must be 6-point, with a vertical. 5. The tilde ("~") must be high. 6. The pipe ("|") must have a center break. 7. The zero ("0") must be more narrow/pointy than the O.

Anyone else having trouble with this? Some characters not showing up. Chrome 51 on Windows 10: https://i.imgur.com/TTNQSOA.png

Looks like angular 1 with angular material. Works very smoothly here. Neat.

A "+" icon that has a hover state and an interaction, yet do different things? Good work. Nice quotes are irrelevant if you can't get the basics of user experience right.

As a die hard lover of the eurostile inspired 'monofur' as my programming font Space Mono looks very, very interesting.

Conclusion: Not as good as monofur

Wow - I did not realise they had so many fonts!

I thought Google Fonts has Farsi fonts as well.

Is this what you're looking for? https://fonts.google.com/?subset=arabic

Farsi has four additional letters: : پ [p], چ [t͡ʃ], ژ [ʒ], and گ [ɡ].

I copied those characters into the site, and it looks like they're supported by all but one family. Give it a shot.

No, I Farsi fonts are a little different

Not all characters in the font are displayed. If you look at Open Sans, the description says it has 897 characters, but only 290 are shown.

What's the font used on the page? It reads beautifully (especially in the "about") and I'd like to use it.

My bad, for anyone wondering the same, I just read the source and it's Roboto (which google uses a lot so I should thought of that in the first place).

Being able to select a language for the sample text is very useful. Thanks Google!

Is it just me of the Google fonts page look a lot like the Microsoft Metro design?

Why should anyone buy fonts with so many high quality ones free to use?

\(o_o)/ Unfortunately, this page doesn't exist.

I tried.

https://imgur.com/umVjMZ4

This is very frustrating; can't middle click to open a specimen in another window. I really hate this sort of website. They also seem to disable subpixel antialiasing on some of the transient buttons. I also don't like transient buttons to begin with.

Overall really not happy with most of this redesign. The specimen page is probably more informative though.

I get that OS X has bad subpixel rendering which shows painful fringing on coloured text, but FreeType handles it flawlessly, and I'm pretty sure ClearType does as well. There's no reason to disable subpixel rendering on these platforms.

Most of these look like shit in chrome.

  Lazy loading
  while I scroll
  makes Chrome cry.

Would you much rather it load 500 different web fonts on page load and take 50 years to load?

Pagination.

I found the non-paginated version to be very responsive and quick. Personally, I prefer non paginated results as long as they're quick, and some user testing studies indicate this as well[1]. UX folks seem to prefer not to paginate[2]. Who loves pagination? Usually advertisers.

[1]https://webmasters.googleblog.com/2011/09/view-all-in-search...

[2]http://ux.stackexchange.com/questions/21375/is-there-a-point...

Coding horror had an interesting article awhile back about this https://blog.codinghorror.com/the-end-of-pagination/

Links from half a decade ago are irrelevant here. The claim that pagination only benefits advertisers is ironic, given we are discussing a Google page.

The point of pagination in this case is to reduce the client-side processing load and up-front bandwidth consumption to view the page. This isn't a news article. It's a set of nontrivial binary files being downloaded and rendered using javascript.

The OP of this thread complained that infinite scrolling plus lazy loading put his browser under heavy load. The first respondent accused him of wanting everything loading up front. I merely suggest a middle ground.

My only complaint with infinite scrolling is that it breaks the scroll bar. It looks like Google accounted for that here by pre-rendering placeholders so the scroll bar doesn't keep resizing and jumping around. (But this wouldn't work so well if they had, say, 10,000 fonts.) Waiting for dynamic content to fill in the placeholders is no worse than waiting for a new page to load.

I just wish we had a standard "lever" widget to replace the scroll bar in lazily loaded pages - similar to the middle-click scrolling on at least some systems that have middle mouse buttons.

When I go to a web page, yes, I expect the page to load completely and be done with it.

No scrolling needed. Show 1 page of content, and use AJAX to quickly load new page content.

We've discovered quite a bit while building this site, and better scroll performance is in the works. Stay tuned.

Reply on news.ycombinator.com