Enhancing font rendering across different browsers

Yesterday I was testing different fonts in my project, and strangely it appeared to me that the font was little bit distorted and blurry as compared to my other web-app which was made using react.js reusing the same font. This inconsistency in rendering is often noticed between photoshop and browsers as well.

A quick fix -

For macos devices-

Just add these two css properties.

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

Take a look at the drastric difference this makes on macos devices:

Before -

After -

For Windows-

It's strange that in Windows renders the font much more better using the SVG fonts. So I have the typical font-face snippet that looks something like this.

@font-face {
  font-family: ‘Circular’;
  src: url(‘circular.eot’);
  src: url(‘circular.eot?#iefix’) format(‘embedded-opentype’), url(‘circular.woff’)
      format(‘woff’), url(‘circular.ttf’) format(‘truetype’);
}

Just add the last line for the SVG font -

@font-face {
  font-family: ‘Circular’;
  src: url(‘circular.eot’);
  src: url(‘circular.eot?#iefix’) format(‘embedded-opentype’), url(‘circular.woff’)
      format(‘woff’), url(‘circular.ttf’) format(‘truetype’), url(‘circular.svg#svgFontName’)
      format(‘svg’);
}

Note - SVG fonts are quite heavy in file size, so that’s something to consider. They could go up to 200kb per file. This font type is also not as flexible as others like TTF in terms of changing kerning or line spacing. Finally, the rendering performance of it might be too slow for long body text.

And your work is done!.