This is a years-old bug in Google Chrome on Windows which leaves designers/developers with a choice of using Google Fonts (saves you bandwidth and can save the user bandwdith and page load times since it's cached between sites) and just accepting that Google Chrome Windows users will have an inferior experience or self-hosting your fonts (you do the bandwidth, increased page load to users, making sure you get the font loads in the correct order, slightly longer load time for Safari users). It's kind of amazing that this is still unfixed given how poorly the font rendering makes pages look and the fact that every other Windows browser handles it with aplomb.
I have no idea. We've been suggesting that for years as well. But the web fonts team seems to have no interest in mitigating the Google Chrome Windows bug.
"ChromeOS" Chromebooks look so much nicer than Windows... if you want to browse the web like it's supposed to work, get a Chromebook. /sarcasm
Seriously, this has bugged me for a very long time myself. I don't get why it hasn't been fixed, it's been an issue as long as I can remember, and fortunately, other than at work or my desktop at home, I'm not on windows... My HTPC, which I use for reading more than anything is on Ubuntu, and I recently got a Chromebook as an interim replacement for my stolen MBP.
Though some of the comments mention (rightly) that SVG fonts are larger files than WOFF... they don't seem to take into consideration that SVG, being text/xml can be greatly compressed in transit. I also, REALLY don't get why Google's web fonts' css doesn't give the SVG first to chrome+windows users, so things at least look better there until they fix chrome.
It doesn't bug me much other than having to self-host font files and ensure they're in the hacky order to fix Chrome's issue. Then again, I don't use Chrome other than for testing web pages. I run Firefox on Windows and Android and sync them. When Firefox first started using DirectDraw, there were some issues with fonts, but Mozilla made it a priority and got it sorted relatively quickly (lightning fast compared to Chrome's font bugs).
Couldn't they also only serve up the fix to affected chrome browsers by checking the user agent string in the request header? That way they give the most effective format based on the browser and os requesting it.
That's what I meant. The Google Fonts CSS is already based on the user agent string (it doesn't contain media-queries or similar tricks), so they just need to treat Chrome+Win differently and tell it to load the SVG version.
I have had that issue starred for years, as I assume most of the others have. The failure of Chromium to support DirectWrite in a reasonable timeframe has kept me pure in my unwavering support of Firefox, even when Chrome was considered the hipper browser. It's easier now to remain with Mozilla, what with anti-Google sentiment becoming mainstream.
Jokes aside, it's embarrassing how long that issue has been left to rot. All fonts in Chrome-Windows look awful once one is used to Firefox or Internet Explorer's rendering.
Similar type of deal with [going 64-bit](https://code.google.com/p/chromium/issues/detail?id=18323) on Mac OS X. Has languished for multiple years. DirectWrite shipped in 2009, one month after Snow Leopard with 64-bit recommended for apps by default.
Not even when you're not used to the other browsers' font rendering. On some of Google's web pages the fonts are actually unreadable unless you scale the page to 250% or so.
>>>> All fonts in Chrome-Windows look awful once one is used to Firefox or Internet Explorer's rendering.
Kind of hard to imagine IE actually renders something better than Chrome. I thought that would be enough to get them motivated to get this corrected. Guess I was wrong.
Does this mean it'll have the same terrible antialiased text rendering IE has? That only looks good on high DPI? That's one of the main reasons I've been on Chrome: no blurry text.
This is most relevant on Retina/hi-dpi displays, that's where DirectWrite shines and Chrome flails. For regular-dpi displays, I think DirectWrite is actually a bit worse than the traditional Win font rendering.
I don't think this is related to the issue this article talks about, but it may be relevant to Windows Chrome users whose fonts suddenly look bad...
I noticed in the past week that sites of mine that had imported a font from Google Web Fonts without explicitly specifying to import bold/italics versions too were looking odd (e.g. weird text-shadow for no reason on what used to appear bold). In past versions of Chrome (or perhaps it's Google Web Fonts that has changed, I'm not sure), I've been able to use [b] and [i] HTML tags around text and my Google fonts have responded accordingly (without my needing to explicitly import bold/italic versions) -- but that's no longer the case. The fix is (obviously) to explicitly import the versions of the fonts you bold/italicize, but it actually took me a little while to figure out that that (and not some weird CSS issue) was the problem.
Hopefully this saves a few other people 15 minutes of poring over their CSS trying in vain to figure out what isn't working!
Just MAKE SURE NOT TO COPY FROM THE FONTSPRING POST linked to in the article. Their code samples have curly-quotes in the CSS which fails silently and you will go nuts trying to debug it. Um, hypothetically. Ahem.
All browsers: why can't you display an intermediate font while downloading the custom font-faces?
It just sucks so badly. Most time I'm stuck on a 8 KByte/sec cellphone connection, and I have to wait YEARS just to read text - or press ESC to force display of system fonts.
You might think this is just "they didn't bother implementing that", but in fact some people considered this a feature and browsers added "flash of invisible text" as a feature.
Browsers are in a tough spot: when you specify a font, there's no way to programmatically determine how critical that font is to your design (see the FOUT discussion saurik linked above).
There are two things which we need to fix this:
1. Simple, robust font load events so you could treat this like any other type of content and make the decision about whether to display an alternative until something finishes loading:
2. As a lower priority, browser support for using the @font-face unicode-range property to avoid unnecessary downloads. It's not uncommon for sites to use a webfont with known support for non-ASCII characters to avoid issues with older operating systems & browsers. Unfortunately, there's a huge problem with this because specifying a webfont will cause it to be downloaded at least as soon as an element on the page uses that font[1] and it'd be really nice if there was a way to e.g. list a font which should only be downloaded if one of the earlier fonts in the stack doesn't contain the needed glyph so I could say "font-family: Arial, noto-sans" and have a Windows 7 user not download anything while still displaying correctly, if slower, for an XP user.
Just want to point out one minor nit to pick.. NEVER specify "Arial" or "Helvetica" as fonts and simply fall back to `sans-serif` On OSX you'll get Helvetica, on Windows you'll get Arial, which display better on their given platforms.. a Helvetica-like font is the default on pretty much every given platform for web browsers.
I would say, that if a fallback font is specified in the font-face rule, then that should be used while the web-font is downloaded.
Also, it would be nice, as you say, if a fallback would be used when a glyph isn't in the specified font (only for that glyph).
You're generally right about `sans-serif` vs. Arial/Helvetica. There used to be a complication in that even on OS X, Arial has significantly more glyphs than Helvetica but as browsers get better font substitution support and stop breaking ligatures (http://chris.improbable.org/experiments/browser/combining-ha...) this matters less.
It would, of course, also be significantly less important if they optimized the download decision so you could use something like noto for everything and not have to worry about significant visual differences.
Most people will get their browser's Helveticoid default anyway, and people who have changed their browser's default will get the font they actually wanted.
I've read that Windows' Helvetica font is uglier than Arial (perhaps a hinting issue) and, since few Windows'users have Helvetica Neue, that a recommended don't family is thus:
I thought specifying a fallback font does that. Of course, problem is that many websites try to avoid the dreaded FOUT, and end up hiding text, or even the whole site, until fonts are loaded.
The latter are the worst of the bunch. Same goes for those fucktards who make their site load (i.e. remove the display:none on the content) on loading/error event (timeout etc) of the social media plugins. Oh, and of course no images and no nothing has been loaded... so ANOTHER time pressing ESC and hope that I finally will get some text.
Please, developers out there: test your websites on REAL mobile devices WITHOUT LTE/3G/UMTS. You WILL be surprised how fucking awful your site is on a low-bandwidth link.
I regularly test my websites with various tc settings, including traffic shaping, packet loss, line outages etc. Lots of manual work, but it really helps to see which parts of your API can be traffic-optimized.
For those of you who don't care about custom fonts, I made a quick extension[0] that disables use of all web-fonts (woff/ttf/otf) by blocking all requests made to these extensions. It does save me a lot of bandwidth when I do enable it. Plus, it saves you from FOUT. Its open source on GitHub as well[1].
I still have to add support for a whitelist, so that it can be actually useful (for instance, GitHub needs web-fonts for most of its interface).
What's "a lot"? Aren't font loads on the order of a few kilobytes a page? Seems like loading the front page of the New York Times once would use more bandwidth than all the web fonts you run into for a month.
I found using the SVG version rather then tff helps a bit on windows. Its nasty looking but it does make it a bit more presentable. Only thing is that for some reason Google Web Font doesn't display the SVG so I have to use something like Font Squirrel to create my fonts and host locally. I only tend to do this if the client just so happens to tests on windows , most of the time they don't care since they are on macs so its not that much of an hassle when I have to go down this road.
Edit: Maybe I should of read the article before my comment, seems he does the same thing.
Its almost fixed, but then it needs to go through the "food chain" before it reaches every one of us. So, only in about 6 months that it might be finally fixed.
