Windows Chrome, why do my fonts look so bad?

http://lee.greens.io/blog/2014/01/13/windows-chrome/

by JustResign • 13 years ago

82 56 13 years ago

lee.greens.io

mschuster914• 13 years ago

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.

lampe3• 13 years ago

One solution for your problem could be that the Browser displays the font in the system font and when the costume font is loaded it can change to it.

I think chrome beta on android does that but iam not sure right now

gizmo• 13 years ago

Recent versions of Internet Explorer use placeholder fonts by default.

saurik• 13 years ago

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.

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

http://filamentgroup.com/lab/bulletproof_icon_fonts/

mschuster914• 13 years ago

That would require site code changes and does not help me, the victim of a severe lack of testing...

ehsanu1• 13 years ago

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.

mschuster914• 13 years ago

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.

(end of rant)

ferongr• 13 years ago

All browsers

Obligatory "Firefox doesn't suffer from this". It will display the default sans-serif system font while the website's font load.

abrowne• 13 years ago

And the default serif for a custom serif. (Or maybe just because my default font is serif?)

sergiotapia• 13 years ago

I have just given up on using Google Webfonts. :)

I just use:

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

thristian• 13 years ago

Why not just:

    font-family: sans-serif;

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.

cpeterso2• 13 years ago

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:

  font-family: "Helvetica Neue", Arial, sans-serif;

acdha2• 13 years ago

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:

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

tracker12• 13 years ago

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

kybernetikos• 13 years ago

Actually, they can, the only issue is that most web developers take deliberate measures to avoid 'Flash Of Unstyled Content'.

Tomdarkness• 13 years ago

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.

JohnTHaller4• 13 years ago

Note that the discussion begins over 4 years ago. Still can't believe it's been this long.

bhauer• 13 years ago

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.

ygra• 13 years ago

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.

zw• 13 years ago

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.

at-fates-hands• 13 years ago

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

MichaelGG• 13 years ago

text in general look much nicer

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.

mwsherman• 13 years ago

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.

JustResign2• 13 years ago

I'm not disagreeing with you, but I noticed this on a garden-variety 24" 1920x1200 LCD, Windows 7.

ubercow13• 13 years ago

Not sure I agree..while it will depend on your display, I certainly find the left in this image (DW) easier to read than the right (GDI)

http://i4.minus.com/igp9IxeEX51ES.png

(I know these comparisons have been done to death in the past)

ahugon• 13 years ago

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!

xcrunner529• 13 years ago

It's a bug and really annoying.http://code.google.com/p/chromium/issues/detail?id=332958

vyrotek• 13 years ago

Thank you (and ahugon) for confirming this! I noticed one of our sites was having this issue and wasn't sure what was causing it.

JohnTHaller4• 13 years ago

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.

giovannibajo12• 13 years ago

While the bug is being fixed, why doesn't Google add the SVG workaround to the CSS being served for its fonts?

JohnTHaller4• 13 years ago

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.

etler• 13 years ago

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.

ciquar• 13 years ago

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

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

kclay• 13 years ago

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.

adventured• 13 years ago

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)

tdj• 13 years ago

This. I use 0.1px for smaller type, and 0.25 for bigger. It also makes it look thicker.

Also, the same problem is also present in Safari for Windows, in case anyone actually uses it..

badman_ting• 13 years ago

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.

JustResign2• 13 years ago

Thanks.

<.< Double-checking my CSS in the article >.>

mistercow• 13 years ago

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.

captn3m0• 13 years ago

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

devindotcom• 13 years ago

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.

joaohenriques• 13 years ago

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.

asadotzler• 13 years ago

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

joseph_cooney• 13 years ago

And also the ability to run on Windows XP, where DirectWrite doesn't exist.

omegote• 13 years ago

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

Windows Chrome, why do my fonts look so bad?

Related Stories