Why is google font weight not working?
I'm trying to change h1 to font-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 a font-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.
Answer
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.