Font-size not getting bigger in CSS

January 27, 2022

I have an h1 element that I want to change the size of it among with other properties, but the only thing gets changed is the font family.
Note that I am using some bootstrap gridding, which I don’t know it might be which causing this problem I am still new to Bootstrap.

h1{
  font-family: 'Montserrat';
  line-height: 1.5;
  font-size:3.5rem;
}

<head>
   <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">
  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
 <div class="row">
      <div class="col-lg-6">
        <h1>Hello World.</h1>
      </div>
      <div class="col-lg-6">
      </div>
 </div>

Also, I have tried my code on different browsers and devices, I cleared the cache I have on my browser and same results.

>Solution :

How to approach issues of type "My styles are not applied"

First, you should use the dev tools in your browser to investigate the element in your DOM.

As you can see, your font-size value is overwritten by Bootstrap’s styles (coming from that _rfs.scss file mentioned at the right).

Option A: Display Headings (Bootstrap)

Use Bootstrap’s Display Headings. This lets you define different font sizes on your headings.

In your case, you could try this one:

<h1 class="display-1">Hello World.</h1>

Option B: Class Specificity

Add a class by yourself and refer to this class in your CSS.

h1.my-heading {
  font-family: 'Montserrat';
  font-size: 15rem;
}

<head>
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">
  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<div class="row">
  <div class="col-lg-6">
    <h1 class="my-heading">Hello World.</h1>
  </div>
  <div class="col-lg-6">
  </div>
</div>

Option C: !important (not recommended)

Use the !important keyword, which guarantees, that your styles are preferred on h1 elements. This is problematic as soon as multiple !important statements exist and is rather considered bad practice.