CODEWITHSUNDEEP
cssfirefoxgoogle-chromecross-browserrender
elvista
elvista

Reputation: 605

Same font renders differently across FF7 and Chrome

Screenshot: https://i.sstatic.net/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

Upvotes: 1

Views: 1008

Answers (2)

Guffa
Guffa

Reputation: 700342

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.

Upvotes: 1

thomasrutter
thomasrutter

Reputation: 117343

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.

Upvotes: 2

Related Questions