Same font renders differently across FF7 and Chrome

Question

Screenshot : http://i.imgur.com/QVBGx.png

It is pretty evident that my site renders different on Chrome and FF7 on my Win7 machine

I am using this:

h1, h2 {font-family: "Lucida Grande", "Helvetica Neue", Arial; }

Does anybody can point me how can I even these diffs? I don't want fonts with different 'feelings' on each browser.

The font, Lucida Grande is installed in my Windows machine

EDIT: font-weight: normal !important

doesn't work either

Answer 1

It looks like the two browsers are rendering it with a different weight .

I can think of two possibilities, though I don't know if either are correct.

• You requested a bold font, but that font is not available in bold. One browser is just showing the regular, non-bold variant unchanged, whereas the other has processed it to look bold.

• You requested a particular weight of font, say "bold" or "600" but the installed fonts do not precisely match that weighting. One browser is substituting an "extra-bold" variant of font, and the other a "regular-bold", or something of this nature.

If either of these is correct you could play around with the font-weight CSS property to try and alter it. But then that may affect substitution of whichever font is chosen in the case that it is viewed on a system with no Lucida Grande font at all.

Answer 2

Fonts will always render slightly different from one browser to another, but that was a bit more difference than usual. Probably because the headers have font-weight: bold; as default, and the font doesn't have a bold variation so the browsers create the bold style from the regular weight in different ways.

Anyway, you might want to use more common fonts. On my Windows 7 machine there is neither Lucida Grande nor Helvetica Neue, so it would render using Arial. Still, I have the additional fonts that come with both MS Office and Photoshop, so I have a lot more fonts installed than you can expect from a standard system.

Also, you should always specify a generic font as the last resort, in this case sans serif , otherwise it would render using the default font if none of the fonts are installed, which is something like Times Roman which has a completely different look. Perhaps also adding Helvetica , which is the closest equivalent of Arial on non-Windows systems.