font-weight is not working properly? - css

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

font-weight can fail to work if the font you are using does not have those weights in existence – you will often hit this when embedding custom fonts. In those cases the browser will likely round the number to the closest weight that it does have available.
For example, if I embed the following font...
#font-face {
font-family: "Nexa";
src: url("Nexa-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
Then I will not be able to use anything other than a weight of 400. All other weights will revert to 400.
If you want additional weights, you need to specify them in separate #font-face declarations with those additional weights, like this.
#font-face {
font-family: "Nexa";
src: url("Nexa-Light.ttf") format("truetype");
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: "Nexa";
src: url("Nexa-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: "Nexa";
src: url("Nexa-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}
Usually each weight will have a separate font file the browser will need to download, unless you're using variable width fonts.

Answer 2

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

Answer 3

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 then 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 4

If you're importing a Google font, you need to ensure you've specified all the weights that you would like to use.
In my case, I was using Google's Roboto font. I had to import it with several different weights, like this:
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto+Slab|Roboto:300,400,500,700" rel="stylesheet" />
Remember that each additional weight increases the amount of data each visitor needs to download, and can slow down the loading of your page, so only use what's necessary.

Answer 5

i was also facing the same issue, I resolved it by after selecting the Google's font that i was using, then I clicked on (Family-Selected) minimized tab and then clicked on "CUSTOMIZE" button.
Then I selected the font weights that I want and then embedded the updated link in my html..

Answer 6

For me the bold work when I change the font style from font-family: 'Open Sans', sans-serif; to Arial

Answer 7

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