CODEWITHSUNDEEP
htmlcssbootstrap-4fonts
Liya Thomas
Liya Thomas

Reputation: 3

Not able to customize google fonts in css

I linked google fonts into my code. and I'm not able to customize it like font-family:"Montserrat-Black 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

HTML

  <meta charset="utf-8">
  <title>TinDog</title>

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Ubuntu&display=swap" rel="stylesheet">

  <!-- CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">

  <!-- Font Awesome -->
  <script src="https://kit.fontawesome.com/7258ec066a.js" crossorigin="anonymous"></script>

  <!-- Bootstrap Scripts -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>

<body>

  <section id="title">
    <div class="container-fluid">

      <!-- Nav Bar -->

      <nav class="navbar navbar-expand-lg navbar-dark ">
        <a class="navbar-brand">tinDog</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav ml-auto">
            <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" class="btn btn-dark btn-lg"><i class="fab fa-apple"></i> Download</button>
          <button type="button" class="btn btn-outline-light btn-lg"><i class="fab fa-google-play"></i> Download</button>
        </div>
        <div class="col-lg-6">
          <img src="images/iphone6.png" alt="iphone-mockup">
        </div>
      </div>

    </div>
  </section>

CSS

  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:"Ubuntu";
   font-size: 2.5rem;
   font-weight: bold;
 }

 .nav-item{
   padding:0 18px;
 }

 .nav-link{
   font-family:"Montserrat-Light";
   font-size: 1.2rem;
 }

In this code, I've selected the montserrat-black family. In the body font-family:"Montserrat-Thin" works but in the .nav-link font-family:"Montserrat-Light" doesn't. why is that so?

Upvotes: 0

Views: 1887

Answers (2)

Jontee
Jontee

Reputation: 1

So you only imported one of the fonts. This should import both of them:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;900&display=swap" rel="stylesheet">

Here you can select the fonts and then select embed and it will fix create the link for you. https://fonts.google.com/specimen/Montserrat?preview.text=monster&preview.text_type=custom&query=montserrat&sidebar.open=true&selection.family=Montserrat:wght@300

This is what Matt was meaning. Font weight 100 is Thin Font weight 300 is Light Font weight 900 is black If you look at the link in the Html file it shows the different weights. wght@100;300;900

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;900&display=swap" rel="stylesheet"> 

<style>
    .one{
        font-family: 'Montserrat', sans-serif;
        font-weight: 100
    }
    .two{
        font-family: 'Montserrat', sans-serif;
        font-weight: 300
    }
    .three{
        font-family: 'Montserrat', sans-serif;
        font-weight: 900
    }
</style>
<body>
    <h1 class="one">
        Thin
    </h1>
    <h1 class="two">
        Light
    </h1>
    <h1 class="three">
        Black
    </h1>
</body>
</html>

Upvotes: 0

user4945014
user4945014

Reputation:

The font families are not named with their weight. You have to use font-family: 'Montserrat', sans-serif; for all of them and use font-weight declarations separately to set the weight. For example:

font-family: 'Montserrat-Thin', sans-serif;

becomes:

font-family: 'Montserrat', sans-serif;
font-weight: 300;

This is clear if you read the CSS that Google Fonts is actually giving you (by opening the link in the browser)—you can see that the @font-face blocks are all named "Montserrat".

(Of course you'll also need to add the 300 weight to the Google Fonts link as @Jontee said: <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;900&display=swap" rel="stylesheet"> )

Upvotes: 1

Related Questions