Unable to change Google font-weight in CSS

Question

I've been trying to give the h1 tag a font-weight of 900, but am unable to do so. The only way I can is if I do

font-weight: 900!important;

I can't seem to figure out how to change Google Font's font-weight, I've seen other posts with the exact question, but I can't for the life of me get it to work myself. If anyone could help me out that would be great, thank you.

#title {
    background-color: #ff4C68;
}

h1 {
    
    font-family: 'Montserrat', sans-serif;
    font-weight:900;
    font-size: 3rem;
    line-height: 1.5;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>TinDog</title>
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet"> 
</head>


<body>

  <section id="title">

    <!-- Nav Bar -->
    <nav class="navbar navbar-expand-lg navbar-dark">
      <a class="navbar-brand" href="">Tindog</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav">
              <li class="nav-item">
                  <a class="nav-link" href="">Contact</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="">Pricing</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="">Download</a>
              </li>
          </ul>
      </div>
    </nav>




    <!-- Title -->

    <div class="row">
      <div class="col-lg-6"> 
        <h1>Meet new and interesting dogs nearby.</h1>
        <button type="button">Download</button>
        <button type="button">Download</button>
      </div>
      <div class="col-lg-6">
        <img src="images/iphone6.png" alt="iphone-mockup">
      </div>
    </div>

  </section>

score 0 · Answer 1 · answered Feb 09 '21 at 06:10

It seems that it's just related to specificity. Add a class name to the h1 and it will work

#title {
    background-color: #ff4C68;
}

.highlight{
    
    font-family: 'Montserrat', sans-serif;
    font-weight:900; 
    font-size: 3rem;
    line-height: 1.5;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>TinDog</title>
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet"> 
</head>


<body>

  <section id="title">

    <!-- Nav Bar -->
    <nav class="navbar navbar-expand-lg navbar-dark">
      <a class="navbar-brand" href="">Tindog</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav">
              <li class="nav-item">
                  <a class="nav-link" href="">Contact</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="">Pricing</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="">Download</a>
              </li>
          </ul>
      </div>
    </nav>




    <!-- Title -->

    <div class="row">
      <div class="col-lg-6"> 
        <h1 class="highlight">Meet new and interesting dogs nearby.</h1>
        <button type="button">Download</button>
        <button type="button">Download</button>
      </div>
      <div class="col-lg-6">
        <img src="images/iphone6.png" alt="iphone-mockup">
      </div>
    </div>

  </section>

score 0 · Accepted Answer · answered Feb 09 '21 at 06:38

Can you please check the below code? Hope it will work for you. If you want to apply your style then you are supposed to add it after bootstrap style (your stylesheet gets higher priority) so that it will overwrite bootstrap style. So we would not require to add any extra class or Id selectors to the elements.

Please refer to this link: https://jsfiddle.net/yudizsolutions/dbwn8ja3/2/

 <!DOCTYPE html>
 <html>

   <head>
     <meta charset="utf-8">
     <title>TinDog</title>
     <link rel="stylesheet" href="css/styles.css">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">

     <style>
       #title {
         background-color: #ff4C68;
       }

       h1 {

         font-family: 'Montserrat', sans-serif;
         font-weight: 900;
         font-size: 3rem;
         line-height: 1.5;
       }

     </style>
   </head>


   <body>

     <section id="title">

       <!-- Nav Bar -->
       <nav class="navbar navbar-expand-lg navbar-dark">
         <a class="navbar-brand" href="">Tindog</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav">
             <li class="nav-item">
               <a class="nav-link" href="">Contact</a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="">Pricing</a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="">Download</a>
             </li>
           </ul>
         </div>
       </nav>




       <!-- Title -->

       <div class="row">
         <div class="col-lg-6">
           <h1>Meet new and interesting dogs nearby.</h1>
           <button type="button">Download</button>
           <button type="button">Download</button>
         </div>
         <div class="col-lg-6">
           <img src="images/iphone6.png" alt="iphone-mockup">
         </div>
       </div>

     </section>

Linking my stylesheet a line after linking bootstrap fixed the problem! Thank you! — jhinori, Feb 09 '21 at 18:16

Unable to change Google font-weight in CSS

2 Answers2