How to work around poor rendering of a font in Internet Explorer?

There are several factors for the differentiated presentation of the fonts in the different systems, especially with regard to the engine used by the operating system and the anti-aliasing algorithm in the case of Windows, to ClearType .

On the other hand, you are using a @font-face inclusion format, which should minimize the differences as there are several formats specific to each type of browser and operating system.

If it were in its place, it would alternate the different types of font, inhibiting the others and would test to see if it makes any difference, after all IE may not be reading the URL that you expect and that has better compatibility in the Windows environment .

However, based on in this article and in this topic I would say that" failure "in the drawing of some letters comes from particularities of the font that, when processed in the algorithm of ClearType , end up visually" damaged ".

If I'm correct, the font you used is this . I downloaded the original OTF and opened the file on windows XP. Apparently it has features that can cause rendering problems, such as some isolated pixels in the corners of the letters.

Only by using a image to have the same result in any browser and operating system.

The way text is rendered in the browser depends on a number of factors such as operating system, calibration, and render parameters.

We can not expect source rendering to be the same in any environment.

To solve problems like yours I have a GIST (on Font-Face) in github that applies a set of rules in the body and 2 types of font import being that today I only use the newest.

GIST Content:

/**
 * Adicionar ao CSS após o CSS Reset
 *
 * Sites para Converter Fonts em WebFonts
 *   http://convertfonts.com/
 *   http://www.fontsquirrel.com/tools/webfont-generator
 *   http://fontface.codeandmore.com/
 **/

 * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {     
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);
  -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);
  -webkit-text-stroke: 1px transparent;
  -moz-text-stroke: 1px transparent;
  -ms-text-stroke: 1px transparent;
  text-stroke: 1px transparent;
  text-rendering: optimizeLegibility;
}

And the type of import:

@font-face {
  font-family: 'font_desejada';
  src: url('fonts/font_desejada.eot');
  src: url('fonts/font_desejada.eot?#iefix') format('embedded-opentype'),
       url('fonts/font_desejada.svg#FontDesejada') format('svg'),
       url('fonts/font_desejada.woff') format('woff');   
  font-weight: normal;
  font-style: normal;
}