How to smooth website fonts using CSS3

I came across a pretty cool technique which instantly makes your website that little bit smarter, at the same time I also came across people wondering how some websites have such crisp and clear fonts. There are two ways websites are achieving this:

1. They are most likely using the -webkit-font-smoothing hack. This type of hack is mostly used for mobile browsers, as well as the Apple Safari and Google Chrome Browsers.
2. To really smooth the font and not have anything too blurry websites usually use the text-shadow effect. This is also used so the font will look smooth on all browsers (Opera, Firefox, Safari, Chrome and others alike) except internet explorer.
3. Due to its sub-pixel antialiasing algorithm OS X tends to render light text on dark backgrounds too bold. Using icon fonts sometimes leads to blurry rendering. Firefox recently added -moz-osx-font-smoothing to version 25.

When you apply the font smoothing hack to your stylesheet and you want it applied to your whole site, make sure we write the following code.

Let's start off by adding the font smoothing hack to your stylesheet:

  html, html a {
    -webkit-font-smoothing: antialiased !important;
  }

Now for the text shadow effect to really smooth out the font:

  html, html a {
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  }

Firefox is not very smooth on OS X so let's fix that also:

  html, html a {
    -moz-osx-font-smoothing: grayscale;
  }

Here is the code all put together:

  html, html a {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    -moz-osx-font-smoothing: grayscale;
  }               

To see this in action, just take a look at our website, we use font smoothing through our site!