Search code examples
htmlcsscross-browserfont-face

font not consistance across differnet Operation system/different machines

I am using "Populaire" font. I am having a weird problem.

When I view the font in laptop, fonts are clearly formed without any distortion (on all browsers) but when the same was seen on other systems(not all but few systems do), it started appearing distorted (again, on all browsers). I am not sure what will cause the font to be distorted in some systems. Please advice. Here is the CSS that I have used in my code..

@font-face {
font-family: 'Populaire';
src: url('font/populaire.eot');
src: url('font/populaire.eot?#iefix') format('embedded-opentype'),
     url('font/populaire.woff') format('woff'),
     url('font/populaire.ttf') format('truetype'),
     url('font/![enter image description here][2]populaire.svg#populaire') format('svg');
}

h1 {
font-family: 'Populaire','Helvetica neue',Helvetica,Arial,sans-serif;
font-size: 2em;
font-weight:lighter;
color: #ffffff;
background-color: #8D407C;
width:250px;
margin: 0;
padding: 0;
}
Solution

  • The type in your second screenshot is being displayed without anti-aliasing. This might occur because the second computer does not have Cleartype enabled.

    http://www.microsoft.com/typography/cleartype/tuner/step1.aspx

    In Windows Vista, Windows 7, and OSX Cleartype (or an equivalent anti-aliasing engine) is enabled by default.

    Without anti-aliasing, any typeface that has not been specifically hinted for on-screen display will appear 'jaggy', since its curves do not neatly fit to the screen's pixel grid.