Font-size not getting bigger in CSS

Question

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.

Simply check the inspector of the browser you are using and you will see which rule is overruling your custom CSS — josias, Jan 27 '22 at 08:10
Wrap your styles in the correct media queries and it will work. In case of large screens: ```@media (min-width: 1200px)```, do not add ```!important``` when not needed. — prettyInPink, Jan 27 '22 at 08:14
Does this answer your question? [How can I override Bootstrap CSS styles?](https://stackoverflow.com/questions/20721248/how-can-i-override-bootstrap-css-styles) — aerial, Jan 27 '22 at 08:23
just curious where is the CSS file in the of the HTML. If you use external css file, the link to the file usually comes at the last of all the links in the head. example `` link should be after the google font and bootstrap CDN — Shriyacodes, Jan 27 '22 at 08:33

gru · Accepted Answer · 2022-01-27T09:35:43.330

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, only in your case)

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.

font-size: 15rem !important;

Option D, would be to include the media queries, as bootstrap is doing: ```@media (min-width: 1200px)``` and so on... — prettyInPink, Jan 27 '22 at 08:22

score 1 · Answer 2 · answered Jan 27 '22 at 08:16

you just need to be more specific in the CSS query selector

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

<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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<div class="row">
  <div class="col-lg-6">
    <h1 class="bigger">Hello World.</h1>
  </div>
  <div class="col-lg-6">
  </div>
</div>

Some examples with a higher specificity:

table td    { height: 50px !important; }
.myTable td { height: 50px !important; }
#myTable td { height: 50px !important; }

Or add the same selector after the existing one:

td { height: 50px !important; }

Or, preferably, rewrite the original rule to avoid the use of !important altogether.

[id="someElement"] p {
  color: blue;
}

p.awesome {
  color: red;
}

RES: MDN Specificity

score 0 · Answer 3 · answered Jan 27 '22 at 08:11

You are on the right track with bootstrap. The easiest way to figure out why something does or does not work, is to inspect the element in the browser.
You see there, that rfs.scss overwrites your font-size.
Now you can just google "how to change bootstrap font size" if you want to change it in general, or create a css-class and assign that to your h1.

score -3 · Answer 4 · answered Jan 27 '22 at 08:13

Bootstrap is indeed causing this. Currently you are setting the font-size with just the h1 element, which get's overruled by the CSS of bootstrap.

The only thing you have to do is that you just have to specify the h1 so that it is going to overrule bootstrap.

You can also use !important for your h1. But I always find that the easy way out and not really nice looking.

The only reason your font is working is because it isn't specified in any of bootstrap's CSS.