How to get around poor rendering of a font in Internet Explorer?
I am using a font-kit generated in Font Squirrel and I am getting different results in Mac OS X and Windows environment.
Would there be any way around the bad or different rendering of the Internet Explorer source?
On Mac OS X:
Not 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;
}
3 answers
There are several factors for the differentiated presentation of the sources in the various systems, mainly with regard to the Engine used by the operating system and the algorithm of anti-aliasing and, in the case of Windows, the ClearType.
On the other hand, you are using an include format of @font-face, which should minimize the differences since there are several formats specific to each type of browser and operating system.
If if it was in its place, it would alternate the various types of source, inhibiting the others and would do a test to see if it makes any difference, after all IE may not be reading the URL 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 the "failure" in the design of some letters comes from particularities of the font that, when processed in the algorithm of ClearType , end up visually "corrupt".
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 letters.
Only using a image to have the same result in any browser and operating system.
The way 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.
To solve problems like yours I have a gist (about Font-Face) on 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 import type:
@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;
}