Why is google font weight not working?

Question

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.

Intramuscular

Should be h1 not .h1 – Studnia

Answer 1

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.

Melamie

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; and the weight changed. – Knockout

You're right, did not see the . in his question. I'll correct the answer. – Melamie

Answer 2

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;
}

Lampas

Answer 3

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

Flareup