Font looks different in different browsers

Question

Font looks different in different browsers. How to fix? Font in FireFox , Font in IE

I don't see any difference. I tried having a separate style sheet

<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="css/fontsie.css">
<![endif]-->

. I also linked <link rel="stylesheet" type="text/css" href="fonts.googleapis.com/css?family=sans-serif">; . Here is my code http://jsfiddle.net/priyaa2002/FfFwe/5

Answer 1

Well, obviously they're not the same font. Most likely, you're using a font that's available in Firefox but not available in IE. Can you give us any hints, like what the HTML is like?

Also, check what the default font settings are in both browsers. The Firefox one looks like a special font (taller and lighter than, say, Times Roman) and the other font is a barely serifed font (sort of sans serif with some swashes) like Ultima.

Update

Okay, I've got it. Your font-family is

font-family:Verdana, Geneva, sans-serif;

Your IE doesn't have either Verdana or Geneva (I think your firefox is getting Geneva) and so defaulting to sans-serif . If you really want them to all look the same, consider going to link Google fonts so your page will load fonts for you from Google's network.

I just fiddled that to

font-family:Verdana, Geneva, Times, sans-serif;

and it looks better.

Answer 2

Fonts will always render slightly different in different browsers, there isn't any way of getting around that unless you use images or a javascript solution. One popular solution is typeface.js.

I'd recommend reading up on typeface and doing some research into other solutions and try one.

Link to typeface.js: http://typeface.neocracy.org/

Good luck!

Matti