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!

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.

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