Font displays differently in Firefox vs. Chrome

Question

It seems that my menu bar is displayed with a different font stretch in Firefox than it is in Chrome. See the following:

Here is the CSS applied to this element:

font-variant: small-caps;
font-size:13px;
letter-spacing: 0px;
font-family: Arial;
font-stretch: normal;
text-decoration: none;

As far as I can tell everything regarding that font is exactly the same, yet they still display differently (see pic). Why?

Answer 1

Chrome uses the WebKit rendering engine. Firefox uses the Gecko engine. Both interpret and display type slightly differently, as do the DirectX and Vega graphics engines used in IE9+ and Opera.

You can't force browsers to render text identically, but you can do a couple of things to ensure that your navigation takes up the same width across browsers:

1. Use images or SVGs instead of type for your navigation bar elements. This may prove useful if your navigation area is unlikely to change often. e.g. www.apple.com

2. Fix the width of each navigation element with CSS. The text size will still look different between browsers, but if you give each <li> element in your navigation area a fixed pixel width, the bounding box of each link will be very similar across browsers and the total width of the nav area should be the same.

Answer 2

Differences in font rendering between different browsers (and on different operating systems) is a fact of life. You just have to make sure that if the font displays at different widths your design can still cope.

Answer 3

In case anyone comes across this, for me the problem was letter-spacing. Chrome and Firefox handle the property differently.

My problem was the letter-spacing was affecting the position of other elements; specifically some images in the nav menu. By removing the property my problem was instantly solved.

I have also read that specifically using .point values can have altering effects between the 2 browsers, which was true in my case.

Answer 4

kind of same issue stated here

you can reset your css by

http://developer.yahoo.com/yui/reset/ hope at-lest you get some clue by

Answer 5

I've found that webkit will support px for font size, but for things like letter spacing they will ignore it all together if you don't use em.

Answer 6

After testing 6 browsers/4 rendering engines on two OS. I've found most were the same even with line-spacing. I'll look into the difference with windows and Linux in a minute.

I thought the Palatino font was available everywhere but chrome fell back to times roman which is slightly smaller, the default fonts had the same results (chrome different) which mislead me for a bit.

Anyway if you specify times roman or use @fontface to supply font fileS! you may be able to make your nav bars slicker ;-)

Answer 7

I had a similar problem and found a solution:

Using:

font-family: 'Donegal One', serif;
font-variant: small-caps;
text-rendering: optimizeLegibility;

In Firefox, it looks great. In Chrome, the letter spacing was strange. Removing the optimizelegibility style did the trick. Both browsers render identically now.

I decided to remove the style for webkit and leave it in place for other browsers. Looks fine now.

Answer 8

I had a similar problem with Open-Sans, this did it for me:

-webkit-font-smoothing: subpixel-antialiased;
font-smoothing: subpixel-antialiased;