How to override default font weights in Bootstrap 5.3 using css stylesheet

I want my h1 heading to be a Montserrat black with font weight 900. However on inspecting my website in google developer tools I see that my css code is being overridden by the bootstrap link. Also i can't delete the bootstrap link or my navbar won't work.

How to override the default bootstrap font weight 500 to get a font weight of 900 for my h1?

I tried a solution via including sass file in CSS however that code works only for bootstrap 4 and not on bootstrap 5.3 version.

There are override css code solutions for bootstrap 4 not on bootstrap 5.3 dictionary.

h1 {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.5; /* overridden to 1.2 */
  font-size: 3rem;
  font-weight: 900; /* overridden to 500 */
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

<h1>Montserrat black 900 font weight</h1>

Solution

There are lots of ways to make CSS rules fall higher in specificity rank. An easy one is to prepend body, which just adds another component to the selector and therefore increases specificity. Avoid using !important as it makes future work more difficult.

body h1 {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.5; /* overridden from 1.2 */
  font-size: 3rem;
  font-weight: 900; /* overridden from 500 */
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

<h1>Montserrat black 900 font weight</h1>