How to get around bad rendering of a font in Internet Explorer?

Question

I’m using a font-kit generated on Font Squirrel and am getting different results on Mac OS X and Windows environment.

Would there be some way around the bad or different rendering of the Internet Explorer source?

On Mac OS X:

In Windows 7:

@font-face {
    font-family:'Exo';
    src: url('/sys/resources/font-kits/exo/exo-regular.eot');
    src: url('/sys/resources/font-kits/exo/exo-regular.eot?#iefix') format('embedded-opentype'),
         url('/sys/resources/font-kits/exo/exo-regular.svg#ArchitectsDaughterRegular') format('svg'),
         url('/sys/resources/font-kits/exo/exo-regular.woff') format('woff'),
         url('/sys/resources/font-kits/exo/exo-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Answer 1

There are several factors for the differentiated presentation of the sources in the various systems, especially regarding engine used by the operating system and the anti-aliasing and, in the case of Windows, to Cleartype.

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

If you were in your place, I would change the various types of font, inhibiting the others and make a test to see if it makes a difference, after all IE may not be reading the URL you expect and that has better compatibility in Windows environment.

However, based in this article and in this topic I would say that the "flaw" in the design of some letters comes from particularities of the source that, when processed in the algorithm of Cleartype, end up visually "damaged".

If I’m right, the source you used is this. I downloaded the original OTF and opened the file in windows XP. Apparently it has features that can cause rendering problems, such as a few isolated pixels in the corners of letters.

Answer 2

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

How the text is rendered in the browser depends on several factors such as operating system, calibration and rendering parameters.

We cannot expect the font rendering to be the same in any environment.

Answer 3

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

Content of the GIST:

/**
 * 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;
}