Grow your CSS skills. Land your dream job.

Bad font rendering by webkit browsers on windows machines.

  • # December 31, 2012 at 4:59 am

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

    # December 31, 2012 at 5:35 am

    `-webkit-transform: translateZ(0);` can help in some cases.

    # December 31, 2012 at 9:44 am

    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

    # December 31, 2012 at 10:18 am

    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

    # December 31, 2012 at 10:50 pm

    @chrisburton Depends on the typeface (which is why I made sure to state ‘in some cases’). There have been a couple of cases for me recently where it improved the rendering in Chrome substantially (Chrome is notoriously bad anyway).

    # December 31, 2012 at 11:34 pm

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

    # January 1, 2013 at 2:09 am

    @chrisburton Yeah, my request got closed unfortunately. Apparently an account that has one tweet in two years is still considered active…

    Oh, and here was were I most recently used that (inspect the italic text and toggle the transform to see the difference): http://jsfiddle.net/joshnh/XPSw7/show

    Some typefaces appear a little too strong in Chrome on OS X, so I use this trick to combat that.

    Here’s an example for those that aren’t on OS X:

    Chrome’s rendering:

    Fixed:

    # January 1, 2013 at 3:33 am

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

    # January 1, 2013 at 4:42 am

    @chrisburton Yeah, it’s definitely a problem, and one that only Chrome seems to have :(

    # January 1, 2013 at 4:46 am

    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.

    # January 1, 2013 at 5:05 am

    @sanygeek I doubt it will be fixed overnight; it has been an ongoing problem for many versions :(

    # January 1, 2013 at 12:17 pm

    Chrome should be switching to DirectWrite soon.

    # January 1, 2013 at 6:34 pm

    @chrisburton I think they have been using it since version 22, and in my opinion, it has made the problem worse, not better.

    # January 1, 2013 at 6:37 pm

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

    # January 1, 2013 at 7:44 pm

    @chrisburton Ah, right, it seems we are talking about different operating systems!

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".