Windows Chrome, why do my fonts look so bad?

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

  • Chrome Canary has experimental support for DirectWrite which should make your fonts, and text in general look much nicer.

    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.

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

    Developers, man.

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

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

    [0]: https://chrome.google.com/webstore/detail/disable-web-fonts/...

    [1]: https://github.com/captn3m0/disable-web-fonts

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

  • I've noticed as well that Windows Chrome produces a bit of an ugly jagged look to even common fonts.

    I use this to fix it:

    -webkit-text-stroke-width: 0.15px; (some suggest 0.25px)

  • Take a look at comment #123 on https://code.google.com/p/chromium/issues/detail?id=137692#c...

    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.

  • So the article is suggesting that you could do this with Google Web Fonts by copying the CSS instead of linking to it, and then changing the order.

    While that would work, I wonder if copying and modifying their CSS would technically be a TOS violation.

  • This is, for the most part, a rehash of this article:

    http://www.dev-metal.com/fix-ugly-font-rendering-google-chro...

  • I presume this is simply that Chrome uses GDI rather than DirectWrite here. Perhaps they're prioritizing speed over beauty?

  • This has been a bug for so long, it feels like Groundhog day. Chrome developers couldn't care less about windows users.