7

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.

Community
  • 1
  • 1
14wml
  • 4,048
  • 11
  • 49
  • 97

3 Answers3

9

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.

ssc-hrep3
  • 15,024
  • 7
  • 48
  • 87
  • Actually, 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` to `h1` and added `font-weight: 300;`](https://jsfiddle.net/wzepw41a/6/) and the weight changed. – Heretic Monkey Jul 01 '16 at 20:52
  • You're right, did not see the `.` in his question. I'll correct the answer. – ssc-hrep3 Jul 01 '16 at 21:21
0

Just put your CSS stylesheet under Bootstrap stylesheet. and if you use font-weight and font-style , you need to include it in your CSS stylesheet too or else it will not work.

h1
{
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-style: italic;
}
NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
lyhourt Te
  • 19
  • 3
0

If you're using bootstrap and also a custom css, change the order of the link tags. Bootstrap first and then your custom css.

Emmanuel Akintunde
  • 1