title: Not able to customize google fonts in css
body: <p>I linked google fonts into my code.
  and I'm not able to customize it like
  <code>font-family:&quot;Montserrat-Black</code> or thin or light as required
  I tried linking the regular style and then changing it too but still isn't working.
  font weights are also not working
  i used bootstrap 4 also here.
  my whole code is given below</p>
  <p>HTML</p>
  <pre><code>  &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;TinDog&lt;/title&gt;
  
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Montserrat:wght@900&amp;family=Ubuntu&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
  
    &lt;!-- CSS --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css&quot; integrity=&quot;sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/styles.css&quot;&gt;
  
    &lt;!-- Font Awesome --&gt;
    &lt;script src=&quot;https://kit.fontawesome.com/7258ec066a.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  
    &lt;!-- Bootstrap Scripts --&gt;
    &lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.slim.min.js&quot; integrity=&quot;sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js&quot; integrity=&quot;sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js&quot; integrity=&quot;sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;section id=&quot;title&quot;&gt;
      &lt;div class=&quot;container-fluid&quot;&gt;
  
        &lt;!-- Nav Bar --&gt;
  
        &lt;nav class=&quot;navbar navbar-expand-lg navbar-dark &quot;&gt;
          &lt;a class=&quot;navbar-brand&quot;&gt;tinDog&lt;/a&gt;
          &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarTogglerDemo02&quot; aria-controls=&quot;navbarTogglerDemo02&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
            &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarTogglerDemo02&quot;&gt;
            &lt;ul class=&quot;navbar-nav ml-auto&quot;&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;nav-link&quot; href=&quot;&quot;&gt;Contact&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;nav-link&quot; href=&quot;&quot;&gt;Pricing&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;nav-link&quot; href=&quot;&quot;&gt;Download&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
  
  
        &lt;!-- Title --&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-lg-6&quot;&gt;
            &lt;h1&gt;Meet new and interesting dogs nearby.&lt;/h1&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-dark btn-lg&quot;&gt;&lt;i class=&quot;fab fa-apple&quot;&gt;&lt;/i&gt; Download&lt;/button&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-light btn-lg&quot;&gt;&lt;i class=&quot;fab fa-google-play&quot;&gt;&lt;/i&gt; Download&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-lg-6&quot;&gt;
            &lt;img src=&quot;images/iphone6.png&quot; alt=&quot;iphone-mockup&quot;&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/section&gt;
  
  </code></pre>
  <p>CSS</p>
  <pre><code>  background-color: #ff4c68;
    color: white;
  }
  body{
    font-family: 'Montserrat-Thin', sans-serif;
  }
  
  .container-fluid{
    padding:3% 15%;
  }
  
  h1{
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    line-height: 1.5;
  }
  
  
  /* Navigation Bar */
  
  .navbar{
    padding-bottom: 4.5rem;
  }
  
   .navbar-brand{
     font-family:&quot;Ubuntu&quot;;
     font-size: 2.5rem;
     font-weight: bold;
   }
  
   .nav-item{
     padding:0 18px;
   }
  
   .nav-link{
     font-family:&quot;Montserrat-Light&quot;;
     font-size: 1.2rem;
   }
  </code></pre>
  <p>In this code, I've selected the montserrat-black family.
  In the body <code>font-family:&quot;Montserrat-Thin&quot;</code> works
  but in the .nav-link <code>font-family:&quot;Montserrat-Light&quot;</code> doesn't.
  why is that so?</p>