Why is google font weight not working?
The font-weight
property is set to 500 in the bootstrap css file onto the following elements:
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6
If you want to set the font-weight of an element, you need a selector which is more specific than the default selector (of bootstrap). If you e.g. write a more specific selector like .container-fluid h1 { font-weight: 100; }
, you will see, that it affects the element. You could even use the highly non-recommended !important
after the CSS rule to override more specific CSS rules.
It is however not reasonable to overwrite all styles of a page with the same font-weight. Usually, e.g. titles have a different font-weight than regular text.
EDIT: In your example, however, you could simply use the h1
selector to select all <h1>
elements instead of selecting the .h1
class. You probably made a mistake there. If you have the same specificity of the selector, the order of the CSS stylesheets is relevant. The styles of bootstrap are included before your custom styles, so your custom styles override the bootstrap styles.
14wml
Updated on June 09, 2022Comments
-
14wml almost 2 years
I'm trying to change
h1
tofont-weight: 300
. Except when I did:.h1{ font-weight: 300; }
Nothing happened!
So to test the font weight on other text elements, I set the entire encapsulating container,
container-fluid
, to afont-weight: 200
:.container-fluid{ font-family: 'Work Sans', sans-serif; font-weight: 200; }
...And only a couple elements changed their
font-weight
(see here: JFiddle). The rest stayed the same.Why is this happening? If someone could show me how to change the font-weight of
h1
, that would be very appreciated!
I'm using Chrome if that's relevant. But I also ran my JFiddle on Safari and it was the same result.
I imported all the font weights that I needed at the top of my CSS file:
/*import custom font*/ @import 'http://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900';
I tried using
http:
as this post suggested. Didn't change anything. -
Heretic Monkey almost 8 yearsActually, as long as the OP's stylesheet is after bootstrap.css in the load order, it will override it with the same specificity. For instance, in the fiddle provided, I changed
.h1
toh1
and addedfont-weight: 300;
and the weight changed. -
ssc-hrep3 almost 8 yearsYou're right, did not see the
.
in his question. I'll correct the answer.