CODEWITHSUNDEEP
htmlcssgoogle-fonts
obetto_man
obetto_man

Reputation: 11

Google fonts not rendering

I am trying to embed the Montserrat font, specifically Montserrat-Bold type, into my html/css document using google fonts, but I am unable to get it to work. I have tried reading similar posts trying to address this same issue but none seems to have worked for me. Any idea what the issue may be? (Using google chrome by the way)

#title {
  background-color: #ff4c68;
}

h1 {
  font-family: "Montserrat-Black";
  font-size: 3rem;
  line-height: 1.5;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>TinDog</title>

  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&family=Ubuntu:wght@300&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
  <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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</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 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">Download</button>
        <button type="button">Download</button>
      </div>
      <div class="col-lg-6">
        <img src="images/iphone6.png" alt="iphone-mockup">
      </div>
    </div>

  </section>


  <!-- Features -->

  <section id="features">

    <h3>Easy to use.</h3>
    <p>So easy to use, even your dog could do it.</p>

    <h3>Elite Clientele</h3>
    <p>We have all the dogs, the greatest dogs.</p>

    <h3>Guaranteed to work.</h3>
    <p>Find the love of your dog's life or your money back.</p>

  </section>


  <!-- Testimonials -->

  <section id="testimonials">

    <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
    <img src="images/dog-img.jpg" alt="dog-profile">
    <em>Pebbles, New York</em>

    <!-- <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
    <img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
    <em>Beverly, Illinois</em> -->

  </section>


  <!-- Press -->

  <section id="press">
    <img src="images/techcrunch.png" alt="tc-logo">
    <img src="images/tnw.png" alt="tnw-logo">
    <img src="images/bizinsider.png" alt="biz-insider-logo">
    <img src="images/mashable.png" alt="mashable-logo">

  </section>


  <!-- Pricing -->

  <section id="pricing">

    <h2>A Plan for Every Dog's Needs</h2>
    <p>Simple and affordable price plans for your and your dog.</p>


    <h3>Chihuahua</h3>
    <h2>Free</h2>
    <p>5 Matches Per Day</p>
    <p>10 Messages Per Day</p>
    <p>Unlimited App Usage</p>
    <button type="button">Sign Up</button>


    <h3>Labrador</h3>
    <h2>$49 / mo</h2>
    <p>Unlimited Matches</p>
    <p>Unlimited Messages</p>
    <p>Unlimited App Usage</p>
    <button type="button">Sign Up</button>


    <h3>Mastiff</h3>
    <h2>$99 / mo</h2>
    <p>Pirority Listing</p>
    <p>Unlimited Matches</p>
    <p>Unlimited Messages</p>
    <p>Unlimited App Usage</p>
    <button type="button">Sign Up</button>

  </section>


  <!-- Call to Action -->

  <section id="cta">

    <h3>Find the True Love of Your Dog's Life Today.</h3>
    <button type="button">Download</button>
    <button type="button">Download</button>

  </section>


  <!-- Footer -->

  <footer id="footer">

    <p>© Copyright 2018 TinDog</p>

  </footer>


</body>

</html>

Upvotes: 1

Views: 2956

Answers (4)

Maks
Maks

Reputation: 35

You might want to use

font-family: Montserrat;

And also make sure that you reorganise your header so that the styles.css link is the last one to be interpreted by a browser, otherwise you will end up with a custom Bootstrap font as it is the last element read by a browser.

#title {
  background-color: #ff4c68;
}

h1{
  font-family: "Montserrat";
  font-weight: 900;
  font-size: 3rem;
  line-height: 1.5;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>TinDog</title>

  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&family=Ubuntu:wght@300&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="css/styles.css">
</head>

Upvotes: 1

Mary Obiagba
Mary Obiagba

Reputation: 225

Use this in your CSS:

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

If you check the family in the link tag you'll see it's Montserrat, and not montserrat-black.

If you want it to change color, you can just specify color as usual:

color: black; (you can add any color you like)

When you've changed the family name, also make sure that your WiFi is switched on as it won't work when offline.

Upvotes: 1

Sai Charan
Sai Charan

Reputation: 1

I think it is not 'Montserrat-Black' it is 'Montserrat'

So you can use 'Montserrat', sans serif;

Hope it is help full.. :)

Upvotes: 0

Md Junaid Alam
Md Junaid Alam

Reputation: 1359

You are using wrong font-family. Use only Montserrat.

#title {
  background-color: #ff4c68;
}

h1{
  font-family: "Montserrat";
  font-weight: 900;
  font-size: 3rem;
  line-height: 1.5;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>TinDog</title>

  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&family=Ubuntu:wght@300&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
  <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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</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 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">Download</button>
        <button type="button">Download</button>
      </div>
      <div class="col-lg-6">
        <img src="images/iphone6.png" alt="iphone-mockup">
      </div>
    </div>

  </section>


  <!-- Features -->

  <section id="features">

    <h3>Easy to use.</h3>
    <p>So easy to use, even your dog could do it.</p>

    <h3>Elite Clientele</h3>
    <p>We have all the dogs, the greatest dogs.</p>

    <h3>Guaranteed to work.</h3>
    <p>Find the love of your dog's life or your money back.</p>

  </section>


  <!-- Testimonials -->

  <section id="testimonials">

    <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
    <img src="images/dog-img.jpg" alt="dog-profile">
    <em>Pebbles, New York</em>

    <!-- <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
    <img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
    <em>Beverly, Illinois</em> -->

  </section>


  <!-- Press -->

  <section id="press">
    <img src="images/techcrunch.png" alt="tc-logo">
    <img src="images/tnw.png" alt="tnw-logo">
    <img src="images/bizinsider.png" alt="biz-insider-logo">
    <img src="images/mashable.png" alt="mashable-logo">

  </section>


  <!-- Pricing -->

  <section id="pricing">

    <h2>A Plan for Every Dog's Needs</h2>
    <p>Simple and affordable price plans for your and your dog.</p>


    <h3>Chihuahua</h3>
    <h2>Free</h2>
    <p>5 Matches Per Day</p>
    <p>10 Messages Per Day</p>
    <p>Unlimited App Usage</p>
    <button type="button">Sign Up</button>


    <h3>Labrador</h3>
    <h2>$49 / mo</h2>
    <p>Unlimited Matches</p>
    <p>Unlimited Messages</p>
    <p>Unlimited App Usage</p>
    <button type="button">Sign Up</button>


    <h3>Mastiff</h3>
    <h2>$99 / mo</h2>
    <p>Pirority Listing</p>
    <p>Unlimited Matches</p>
    <p>Unlimited Messages</p>
    <p>Unlimited App Usage</p>
    <button type="button">Sign Up</button>

  </section>


  <!-- Call to Action -->

  <section id="cta">

    <h3>Find the True Love of Your Dog's Life Today.</h3>
    <button type="button">Download</button>
    <button type="button">Download</button>

  </section>


  <!-- Footer -->

  <footer id="footer">

    <p>© Copyright 2018 TinDog</p>

  </footer>


</body>

</html>

Upvotes: 0

Related Questions