Bold text looks very different in different web browsers

I have two browsers both running in Ubuntu 10.

Firefox 4 RC and Google Chrome 10. Both have very different representation of bold text. Please, see screenshot below - Chrome on top, Firefox below

Same browsers in Windows and in Mac OSx show no differences or at least very minor ones.

To rule out any CSS incompatibilities, I checked both styles applied and calculated values for font-weight, size, letter spacing and line height. They all match.

Strange enou开发者_StackOverflowgh text (including this one) that is not bold look exactly the same.

The font used is Monotype Corsiva, it is attached as web font. Other fonts do not have this problem.

My question is how do web browsers generate bold text? Why is that dependent on font used and how to work around it? Using other font is not an option, unfortunately.

EDIT: This is the CSS that apply to the text as requested:

text-align: right;
font-size: 110%;
font-weight: bold;
font-style: normal;
white-space: nowrap;
font-family: "Monotype Corsiva","mntcrsweb",sans-serif;
letter-spacing: 0.02em;
line-height: 100%;
text-shadow: -0.1em -0.06em 0.2em #000000;

font-size: 180%;

direction: ltr;

font-size: 10px;

line-height: 125%;

A bold font would be a separate font file, not included in the main font (at least, not for TTF and OTF formats).

Monotype Corsiva does not have a bold variant, so if you try to embolden it, the operating system and/or the browser tries to fake it, with varying (but always less than ideal) results.

Short answer: don't do that.

Cheers,

Thomas

Just remembered another possible reason for your problem. Fonts can include a BOLD version inside the font. Some browsers and OS uses this others generates the bold themselfs. This could be your problem here. The font might have the bold or oppersite. Havent tested it myself, but that could be the problem.

Alternative go for some of the opensource/free webfonts from Google etc.

what happends if you go away from % and em units? use the "faulty px" instead? do they align then? I dont say that you shouldn't use % or em, but does px units produce the same problem?

If it does, I think its time to forget that perticular font for the task. Sounds buggy to me.

Ofcause as you mention, browsers and OS versions renders fonts differently - eg. cleartype on Windows etc. But they ought to be more or less alike anyways.

If I were in your situation, I would first apply 1 css style, check on all browsers. Then apply the next until the look breaks. Debugging starts from bottom. :o)