Question

Screenshot: https://i.stack.imgur.com/ACTqz.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

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.