I have been experiencing a strange issue with the "Populaire" font that I am using.
On my laptop, the font appears perfectly without any distortion on all browsers. However, when viewed on other systems (not all, but some), it becomes distorted across all browsers. I am unsure of what could be causing this font distortion on certain systems. Any advice would be greatly appreciated. Below is the CSS code that I have implemented:
@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;
}