Bad font rendering by webkit browsers on windows machines.

[sanygeek]

The fonts rendered by chrome and safari on windows PC are pretty bad compared to Firefox or IE. I’ve tried the text-stroke, text-shadow and font-smoothness methods but these haven’t make them look any good.

So I made this web page : [Font Test](http://www.creativesands.in/font-test “Font-Test”)
Here visitors can easily change fonts and their sizes to check font rendering smoothness. I found that fonts have rugged edges until about 50px or so, after which they are smooth. Probably because the glyphs have larger curves then.

Is there a way to improve font rendering on chrome and safari (Windows) ?

[chrisburton]

I think Josh’s method actually makes it worse.

I prefer Chrome when using webfonts that have a weight of 100 to 300. Also, Chrome renders Georgia much better than Firefox on Windows.

See testing

[downpour046]

Fonts can typically look poor if your environment does not have installed mime-types for that specific font. Hosting companies like GoDaddy and others can also provide hardships to some and require workarounds.

http://stackoverflow.com/questions/7415640/correct-apache-addtype-directives-for-font-mime-types

[chrisburton]

@joshuanhibbert Would love to see a simple test case of that theory without other CSS3 features (transforms, transitions, perspective).

Mine: http://codepen.io/chrisburton/pen/hdbBc

By the way, someone I helped just before you on that Twitter handle, had his changed last week.

[chrisburton]

@joshuanhibbert Lame. I wonder if they at all have used the account for Direct Messaging.

What a significant difference between OS X and Windows font rendering. On Windows, it makes the font look worse (pixelated) but better on OS X. So in that case, I’d probably target OS X specifically (if possible).

[sanygeek]

Thanks for your responses. I wonder if chrome is able to access the windows’ font smoothing technology –cleartype. The same fonts render differently on chrome and on IE10 or Firefox.

@joshuanhibbert translateZ(0) seems to smooth out edges a little but the font seems a little blurred then.
Hoping to either find a universal fix that fixes all fonts in chrome or that Google fixes this issue themselves in their next release. I just wonder why this is not already fixed, given, the sheer number of people working behind webkit.

[chrisburton]

Chrome should be switching to DirectWrite soon.

[chrisburton]

@joshuanhibbert I don’t believe so. OS X already supports DirectWrite however, Chrome (on Windows) does not. Right now it supports ClearType.

[sanygeek]

This directWrite thing really seems to be the ray of hope. Here’s what a Chromium-Dev guy has to say about this: [DirectWrite Plans](https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/chromium-dev/5BQYLaalCoY “Chromium-Dev”)

Apparently Firefox and IE are already using this windows technology, I guess that explains their smooth font rendering.

[sanygeek]

Hey I found an article on http://www.smashingmagazine.com that quite explains this whole thing.
[A closer look at font rendering](http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/ “SmashingMagazine”)

And here’s an article on [DirectWrite](http://msdn.microsoft.com/en-us/library/windows/desktop/dd371554(v=vs.85).aspx “Microsoft DirectWrite”) itself.

:)

[Author]

Posts