Why does generated bold fonts look bolder, thicker, on browsers? - css

Question

I'm aware of browser differences here.
I'm aware of the "normal" font-weight attribute, even on bold fonts.
I'm aware there's different font generations around.
Regardless all this, each time we convert a bold font, it gets really thicker.
Has anyone experience this? What ways to you have to overcome this?
We normally end up relying on regular (pretending to be "bold") and light (if exists) to work as "regular", to "fix" the look and feel.
Note (update):
We are using fonts that do have a native bold. And that's the issue.
We are NOT adding any "extra bold".

Answer 1

It is called 'faux bold'. If text is styled as bold or italic and the typeface family does not include a bold or italic font, browsers will compensate by trying to create bold and italic styles themselves.
These computed shapes are ugly. With italic you get the slanted version of the roman type (while a true italic is a totally different shape concept) and the regular is 'upscaled' into bold. Almost if a border is applied. These computed shapes are a (type) designers nightmare.
More on faux bold: http://alistapart.com/article/say-no-to-faux-bold
You can avoid faux bold by supplying the appropriate fonts. Like this:
#font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
body { font-family:"DroidSerif", Georgia, serif; }
h1 { font-weight:bold; }
em { font-style:italic; }
strong em {
font-weight:bold;
font-style:italic;
}
Read also the article (and how not to define style/weights):
http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/
UPDATE:
You might also experience font-smoothing issues. Which can be fixed with some css:
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}