font-weight:900 only working in Firefox

Question

.bold{
font: 900 20px helvetica;
}

.bolder{
font: 700 20px helvetica;
}

I am getting same result for two class except Mozilla Firefox.

Can anyone tell me how can I get same result in all browser (Firefox,Chrome,IE,safari,opera)

Answer 1

It depends on the font. The weight has to be available within the font displayed, or the browser will pick the closest available weight.

Helvetica must not have all of those weights embedded within the font file.

Read about it more here: https://developer.mozilla.org/en/CSS/font-weight

It says:

100, 200, 300, 400, 500, 600, 700, 800, 900

Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, then 600-900 use the closest available darker weight (or, if there is none, the closest available lighter weight), and 100-500 use the closest available lighter weight (or, if there is none, the closest available darker weight). This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.

Perhaps the different browsers have different rules about how to treat font weights when the weight is unavailable.

Answer 2

Most computers do not have a font named “helvetica”, so browsers will fall back to their default font. This may well be different in different browsers. Most fonts on people’s computers have just normal and bold font weight, so the mildly surprising thing is that some browsers implement weight 900 as different from 700 in some situations.