font-weight is not working properly?

Question

http://www.i3physics.com/blog/2010/07/dsfsdf/

Here is an example.

The part where it said "PHP" (the right top corner) remained as slim as it was. here is part of the css code

.wp_syntax_lang {
  background-color:#3c3c3c;
  position:absolute;
  right:0;
  padding:1px 10px 3px;
  color:#ddd; font-size:9px; font-weight:800;
  text-transform:uppercase;
  -moz-border-radius-bottomleft:5px;
  -webkit-border-bottom-left-radius:5px;
  border-radius-bottomleft:5px;
}

I tried bold, bolder, 700, 800, 900 and is not working under FF.

Answer 1

Its because the font size (9px) is too small to display bold. Try 11px or more and it works fine. Or make an image out of it.

Answer 2

Most browsers don't fully support the numerical values for font-weight. Here's a good article about the problem, and even tough it's a little old, it does seem to be correct.

If you need something bolder, than you might want to try using a different font that's bolder than your existing one. Naturally, you could probably adjust the font size for a similar effect.

Answer 3

I removed the text-transform:uppercase; and then set it to bold/bolder, and this seemed to work.