Grow your CSS skills. Land your dream job.

@Font Looks Bad In WebKit Browsers

  • # November 29, 2011 at 12:48 pm

    I loaded an aller font onto this website for the header tags. I have a ttf, eot, woof, and otf loaded. It was originally a ttf and I used a converter to convert the others. Any idea why it would look good on firefox and ie but not on webkit browsers? I did try putting this in the body -webkit-font-smoothing: subpixel-antialiased !important; and it did nothing.

    Should I use a different font? What would be a good one to use for my headers?

    # November 29, 2011 at 1:59 pm

    I have noticed recently a lot of the non-standard fonts I have been using look terrible in Chrome, not necessarily all Webkit browsers though. Even when using Google fonts, go figure. I believe it is just the way these browsers render the font and there isn’t much you can do about it.

    # November 29, 2011 at 6:04 pm

    Yeah, I have noticed that too! It looks fine for h3 and h4. I will try to find a different font for h1, h2, and h5. I wonder if there is a way to make a different font load for Safari and Chrome.

    # November 30, 2011 at 1:50 am

    Luckily the majority of users prefer firefox over chrome…so at least the majority will see the text in all its true-type glory :)

    # November 30, 2011 at 3:32 am

    you can use css hack specific for webkit browsers(chrome and safari) to load different fonts in your webpage.

    # November 30, 2011 at 11:33 am


    How do I do that :D? Do you know of any good tutorials?

    # November 30, 2011 at 11:36 am

    Nevermind, this worked like a charm

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    h1 { font-family: Arial, Verdana, San-Serif; }

    # November 30, 2011 at 2:47 pm

    Added that one to my snipplr…Thanks @matthewb for pointing it out and @laurelbrittany for digging up the code…I had the same issue but disregarded it…

    # November 30, 2011 at 2:53 pm

    Heh. Seems like bad practice to be doing this. We should be using fonts that are optimized for the web.

    # November 30, 2011 at 3:23 pm

    @christopherburton, I do use web optimized fonts…but i have had some display issues and this fixes them. Can;t speak for anyone else however…but good call.

    # November 30, 2011 at 3:33 pm

    Perhaps the fonts you’re using are just saying they are optimized but really not? Where are you all getting your fonts from? I haven’t had issues but that’s not to say I’m right.

    # November 30, 2011 at 3:40 pm

    fontsquirrel & typekit…typically the issues are more with fontsquirrel than typekit however.

    # November 30, 2011 at 3:51 pm

    Hmm. Typekit should be pretty solid. I started testing Brandon Grotesque on my site 3 months ago (still in design stage) until typekit added it to its library and have seen 0 issues cross-browser.

    # November 30, 2011 at 5:39 pm

    I’ve run across a lot of bad looking fonts in Chrome on Windows, but the same fonts looked great in the Mac version of Chrome. With a little further research it turns out that Chrome in windows, for whatever reason, uses a software approach for anti-aliasing fonts, while Firefox and IE9 use hardware accelerated DirectWrite to accomplish the same task. This is only an issue on Windows, as it has to do with DirectX. Sorry, no solution, but maybe with some more awareness, Google can add some hardware anti-aliasing to Chrome.

    # November 30, 2011 at 6:15 pm

    I thought the code below was a fix for that?

    -webkit-font-smoothing: antialiased;

    Also, I noticed that the nav links on looks awful on Windows (perhaps Chrome alone, haven’t tested other browsers).

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

You must be logged in to reply to this topic.

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