0

enter image description hereSo 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!

Eric Brockman
  • 824
  • 2
  • 10
  • 37
  • I don't think there's a way to fix this, it's been a battle ever since font-face webfonts came out. You can see if the user's platform is Windows `if(navigator.userAgent.match(/windows/i)) { }` and then instead of using actual text, use an image which you captured from the Mac, that's what I've done and it works well; the only drawback being edit-ability. – Jace Cotton Feb 27 '13 at 22:37
  • As Jacedc said, there's little you can do about this. As the owner of the Microsoft PC you can try to play with your machine's font rendering (aliasing mainly) but as the developer of a website you're quite helpless. – darma Feb 27 '13 at 22:40
  • @Jacedc Yeah, that won't work unfortunately, this a huge site for a major corporation with multiple contributors around the world. Thanks for your response, though. – Eric Brockman Feb 27 '13 at 22:41

1 Answers1

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.

Tammy Shipps
  • 865
  • 4
  • 13