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

User · Answer

font-weight can also 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           font-weight  300      font-style  normal      Then I will not be able to use anything other than a weight of 300  All other weights will revert to 300  unless I specify additional  font-face declarations with those additional weights

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I removed the text-transform  uppercase  and then set it to bold bolder  and this seemed to work

User · Answer

In my case  I was using Google s Roboto font  So I had to import it at the beginning of my page with its proper weights    lt link href    https   fonts googleapis com css family Roboto Mono Roboto Slab Roboto 300 400 500 700  rel    stylesheet    gt

[css] font-weight is not working properly?

Examples related to css

Examples related to fonts