The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

@Font Looks Bad In WebKit Browsers

  • # January 23, 2013 at 10:59 pm

    That’s actually debatable and depends on the font.

    # January 23, 2013 at 11:09 pm

    This reply has been reported for inappropriate content.

    That’s actually debatable and depends on the font.

    That’s true – some fonts appear horribly smudged. But it seems to remove the jagged edges which , I believe, is what most people encounter on Chrome and Safari.

    # January 24, 2013 at 12:23 am

    I was referring to the posted link by the person above you, sorry.

    # May 22, 2013 at 6:18 pm

    @LaurelBrittany … any system with Verdana will have Arial, so the fallback isn’t needed… also, Arial is fashioned after Helvetica and renders better than Helvetica on Windows, which is the default sans-serif. Helvetica is the default on OSX which looks better… On other OSes it’s another similar sans-serif font. Best for people to simply use “sans-serif” as the default, not specifying Arial, or Helvetica ever.

    I cry a little inside when I see font definitions like: Arial, Helvetica Neue, Helvetica, Open-Sans, sans-serif … where on most platforms, it’s the same as just using sans-serif, and if you happen to have more than one of the fonts installed, it may be using one not well hinted for that platform… just use ‘sans-serif’

    # May 22, 2013 at 7:24 pm

    I cry a little when anyone uses Helvetica. But regardless of the platform, Helvetica isn’t all that great on screen.

    In my experience, I don’t ever recall seeing font stacks described above. Usually it’s something like:

    `Helvetica Neue, Helvetica, Arial, sans-serif`

    # April 1, 2015 at 10:49 am


    This is genius. Thank you. I downloaded my fonts correctly from fontsquirrel. I was using Lato and Oswald (Google Fonts). So what I actually did was use your media querie and I actually then called on the Google fonts and I could view them in Safari!!

    Great job. Thank you.

    # August 31, 2015 at 9:42 am

    Using text-stroke as shown in this article did the trick for me, the font was very ‘thin’ compared to non-webkit :


    -webkit-text-stroke-width: 0.1px;

    Added a bit more thickness than the above myself.

Viewing 7 posts - 31 through 37 (of 37 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed