Embedded web fonts, display drastic difference cross platform

Question

So I've been combatting this for several weeks and still can't find any answer.

I'm using the font League Gothic and have tried using both the webkit method and the css @fontface method, both are giving me the same result.

Everything looks perfect on Apple pcs and mobile devices as-well-as Andriod devices, but on Microsoft pcs, they display as if each character has a different line height / character height.

I've attached an image to show what I mean. The image on the left is from Apple the image on the left is from a Microsoft comp, the one on the right, Apple.

Please note that this is not a browser issue, it looks great on all browsers using one platform, and wrong on all browsers using the other.

Any help would be greatly appreciated! Thanks!

Answer 1

The possible reason is that each browser uses a different font file type; IE ONLY uses .eot, while other browsers will use .ttf or .otf file types. It could be that your .eot type is different than the others; try a different web font (Google Web Fonts has a ton for quick and easy use) and see if the problem persists. If it does, then it's an IE rendering issue with fonts (and granted, no browsers render fonts the same way) and if not, then it's a font file issue.