How To: Clean Up Chrome and Safari's Webfont Rendering

We're well into the era of CSS3 and front-end developers everywhere are now making use of a whole new set of tools to create truly uniquely branded web site designs. This often involves heading over to Google Webfonts and choosing a font that fits into your site's style guidelines. After you load up the font, you check how it looks and you notice Firefox, Opera and Internet Explorer are all rendering clean, but then you fire up webkit-based browsers Safari and Chrome and your new font looks down right awful.

The fact of the matter is, the font is being displayed without any sort of anti-aliasing applied. Just about every instance of text on a screen has some degree of anti-aliasing being applied to it so seeing your text displayed like this can be quite jarring.

The degree to which the text renders poorly varies from font to font and the larger the font-size, the better it will render. You can mitigate the effect to some degree by considering size and face but when you need to conform to specific guidelines, you don't have much room to work with. That's where some simple hacks can work wonders.

The OSX-Only Fix

As you know, not all users are on the same operating system. To immediately fix the issue for users on Mac OSX,  you can instantiate the webkit specific anti-aliasing function available on OSX systems. To do this, add the following to the beginning of your site's global stylesheet.

html {  
    -webkit-font-smoothing: antialiased;
}

For the rest of the world living on Windows and Linux, we will need to get a bit more creative as there is no equivalent function available for non-OSX machines. But fear not! There are a few hacks we can use to kick webkit into gear.

Note: -webkit-font-smoothing also supports sub-pixel anti-aliasing but this will break when employing the Win/Lin fixes so it's best to just keep'r in "antialiased".

The -Webkit-Text-Shadow Hack

To get non-OSX machines to play nice, we need to invoke anti-aliasing indirectly by using CSS3 style treatments on our target text. The first fix is based on the text-shadow property. Simply add the following snippet to class where you call your webfont and it should work. It basically adds an imperceptibly faint flat shadow that forces the text to render using anti-aliasing. Using flat shadow with 0px horizontal and vertical, it essentially creates an even 1px "glow" around the text and essentially re-renders the original non-anti-aliased text through the instantiation of the "barely there" flat text-shadow.

-webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px;

For added imperceptibility, change the RGB of the RGBA-based color reference to the RGB of your background. Lastly, keep it with the -webkit- browser prefix attached so non-webkit-based browsers who already render text correctly don't get the treatment and start acting funky.

If this doesn't hack work for you, you can move on to the -webkit-text-stroke hack.

The -Webkit-Text-Stroke Hack

Between this and the -webkit-text-shadow hack above, I usually just reach for this guy when I need to render text correctly in Chrome and Safari on Windows and Linux Machines. It acts in the vary same manner as the hack above but seems to be standing the test of time a bit better and will work on more users' systems as a result.

The -webkit-text-stroke hack will apply another "barely there glow", only this time as a stroke instead of a flat shadow. Use the following snippet to instantiate the -webkit-text-stroke hack.

-webkit-text-stroke: rgba(255,255,255,0.01) 0.1px;

Again, keep the -webkit prefix to only have webkit users apply the extra snippet. Also, keep the stroke tight and try to match it with your background color's RGB. You can also get the same result by ONLY defining the stroke width, avoiding the need to call in and match colors entirely.

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

With both of these, you can tweak and customize to your own situation as some font-faces may render better with different property settings.

Use Wisely

For these last two hacks, each character re-rendered will require extra resources so it's best NOT to use these to render large swaths of copy. Use these on headers and global elements where you will have the most impact, but for the main copy use 'serif' or 'sans-serif' and let the browser decide.