Understanding @font-face

I am just working on a project lately that requires me to use a custom fonts that are not from Google fonts. And I start running into troubles. Because of the difference of browser supports and operation systems' rendering strategies, it is very difficult to get a consistent performance of custom font types across different OS and browsers. The fonts look perfect on my MAC computer, but they look so pixelated on my client's Windows laptop.

Because of this, I start to look into the issues and methods of font rendering. And I found this is a universal and complicated subject.

Common Solutions

First of all, I want to point to the solutions that I found on internet that are somewhat helpful in my project.

The first one is from CSS-tricks and it provides the deepest support:

```CSS
@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
```

In the CSS-tricks article, Chris Coyier also pointed out an alternative way in solving this based on the trend of supporting WOFF across different browser.

```CSS
@font-face {
     font-family: 'MyWebFont';
     src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
          url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
```

The second method that I found does not entirely solve my problem, but it does make the font displayed on Windows computer smoother. It uses font-smoothing: antialiased or font-smoothing: subpixel-antialiased; property in my @font-face selector.

What is "antialiased"

There is a great article about font rendering on Smashing Magazine. In the article, the author Tim Ahrens mentioned three rendering strategies on computer screen: black and white rendering, grayscale rendering and subpixel rendering.

In grayscale rendering, a pixel that is on the border of the original shape becomes gray, its brightness depending on how much it is covered by the ideal black shape...
This principle—also called antialiasing—is the same that is used when photos are resampled to a lower resolution.

And so in the font-smoothing property, antialiased is to ask the browser to use grayscale rendering methodology to render the fonts to make the font smoother.

Thus, no surprisingly, subpixel-antialiased is the subpixel rendering method, which is the third generation of rendering technology. It is characterized by colored pixels.

The benefits of this technique become clear if we desaturate the image. Compared to plain grayscale rendering, the resolution has tripled in horizontal direction. The position and the weight of vertical stems can be reflected even more precisely, and the text becomes crisper.

Source

Windows

But why the fonts on Windows perform differently from MAC? And it is because almost all browsers rely on system rasterizers.

When looking at Web font rendering, the key distinction we have to make is the operating system. However, there are differences between the browsers in terms of the support given to kerning and ligatures, as well as the application of underline position and thickness, so we cannot expect perfectly identical rendering in all browsers (even on one platform). What’s more, on Windows, the browser can have the font rendered by either of the system technologies—GDI or DirectWrite.