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.
http://www.paulirish.com/2009/fighting-the-font-face-fout/
(There are also some interesting ramifications to these various techniques for the various "icon fonts" that seem to be all the rage these days.)
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:
http://dev.w3.org/csswg/css-font-load-events/
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.
1. Test cases & bug reports here: http://chris.improbable.org/experiments/browser/webfonts/uni...
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).
Obligatory "Firefox doesn't suffer from this". It will display the default sans-serif system font while the website's font load.
I just use:
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: sans-serif;
font-family: "Helvetica Neue", Arial, sans-serif;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.
(end of rant)
I think chrome beta on android does that but iam not sure right now
See the issue here:
https://code.google.com/p/chromium/issues/detail?id=25541
For details on how to enable DirectWrite in Chrome Canary. Might be worthwhile to see what your fonts look like using DirectWrite.
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.
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.
http://i4.minus.com/igp9IxeEX51ES.png
(I know these comparisons have been done to death in the past)
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!
Developers, man.
<.< Double-checking my CSS in the article >.>
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).
[0]: https://chrome.google.com/webstore/detail/disable-web-fonts/...
I use this to fix it:
-webkit-text-stroke-width: 0.15px; (some suggest 0.25px)
Also, the same problem is also present in Safari for Windows, in case anyone actually uses it..
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.
While that would work, I wonder if copying and modifying their CSS would technically be a TOS violation.
http://www.dev-metal.com/fix-ugly-font-rendering-google-chro...
