Question 38840 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Why is my Montserrat font not getting applied in my HTML/CSS code? – Ubuntu

I have specified the correct CSS file in my HTML file to download the Montserrat font but it is not getting applied at all when I view HTML in my Chrome browser. I have tried moving my styles.css file in different locations but it makes no difference. The Montserrat font is not being applied instead it is a default serif font I think. Any help to get the Montserrat font to render would be greatly appreciated.

screenshot of rendered HTML

Here is my HTML code;

<!DOCTYPE html>
<html>

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

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

  <!-- CSS Stylesheets -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">

  <!-- Bootstrap Scripts -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <script src="https://kit.fontawesome.com/693b9c10a5.js" 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" href=" ">tindog</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link" href="#footer">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#pricing">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#cta">Download</a>
            </li>
          </ul>
        </div>
      </nav>

      <!-- Title -->

      <div class="row">
        <div class="col-lg-6">
          <h1 class="big-heading">Meet new and interesting dogs nearby.</h1>
          <button type="button" class="btn btn-dark btn-lg download-button"><i class="fa-brands fa-apple"></i> Download</button>
          <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fa-brands fa-google-play"></i> Download</button>
        </div>
        <div class="col-lg-6">
          <img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
        </div>
      </div>
    </div>
  </section>

  <!-- Features -->

  <section id="features">

    <div class="row">
      <div class="feature-box col-lg-4">
        <i class="icon fa-sharp fa-solid fa-circle-check fa-4x"></i>
        <h3 class="feature-title">Easy to use.</h3>
        <p>So easy to use, even your dog could do it.</p>
      </div>

      <div class="feature-box col-lg-4">
        <i class="icon fa-solid fa-bullseye fa-4x"></i>
        <h3 class="feature-title">Elite Clientele</h3>
        <p>We have all the dogs, the greatest dogs.</p>
      </div>

      <div class="feature-box col-lg-4">
        <i class="icon fa-solid fa-heart fa-4x"></i>
        <h3 class="feature-title">Guaranteed to work.</h3>
        <p>Find the love of your dog's life or your money back.</p>
      </div>
    </div>

  </section>


  <!-- Testimonials -->

  <section id="testimonials">

    <div id="testimonial-carousel" class="carousel slide" data-bs-ride="false">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <h2 class="testimonial-text">I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
          <img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
          <em>Pebbles, New York</em>
        </div>
        <div class="carousel-item">
          <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>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
      </button>
    </div>




  </section>


  <!-- Press -->

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

  </section>

  <!-- Pricing -->

  <section id="pricing">

    <h2 class="section-heading">A Plan for Every Dog's Needs</h2>
    <p>Simple and affordable price plans for your and your dog.</p>

    <div class="row row-cols-1 mb-3">
      <div class="pricing-column col-lg-4 col-md-6">
        <div class="card">
          <div class="card-header">
            <h3>Chihuahua</h3>
          </div>
          <div class="card-body">
            <h2 class="price-text">Free</h2>
            <p>5 Matches Per Day</p>
            <p>10 Messages Per Day</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="btn btn-outline-dark btn-lg" style="width:100%;">Sign Up</button>
          </div>
        </div>
      </div>

      <div class="pricing-column col-lg-4 col-md-6">
        <div class="card">
          <div class="card-header">
            <h3>Labrador</h3>
          </div>
          <div class="card-body">
            <h2 class="price-text">$49 / mo</h2>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="btn btn-dark btn-lg" style="width:100%;">Sign Up</button>
          </div>
        </div>
      </div>

      <div class="pricing-column col-lg-4">
        <div class="card">
          <div class="card-header">
            <h3>Mastiff</h3>
          </div>
          <div class="card-body">
            <h2 class="price-text">$99 / mo</h2>
            <p>Pirority Listing</p>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="btn btn-dark btn-lg" style="width:100%;">Sign Up</button>
          </div>
        </div>
      </div>
    </div>

  </section>

  <!-- Call to Action -->

  <section id="cta">

    <h3 class="big-heading">Find the True Love of Your Dog's Life Today.</h3>
    <button type="button" class="download-button btn btn-dark btn-lg"><i class="fa-brands fa-apple"></i> Download</button>
    <button type="button" class="download-button btn btn-light btn-lg"><i class="fa-brands fa-google-play"></i> Download</button>
  </section>


  <!-- Footer -->

  <footer id="footer">

    <a href="https://www.twitter.com"><i class="fa-brands fa-twitter social-icon fa-xs"></i></a>
    <a href="https://www.facebook.com"><i class="fa-brands fa-facebook-f social-icon fa-xs"></i></a>
    <a href="https://www.instagram.com"><i class="fa-brands fa-instagram social-icon fa-xs"></i></a>
    <a href="mailto:[email protected]"><i class="fa-solid fa-envelope social-icon fa-xs"></i></a>
    <p class="footer-title">© Copyright 2018 TinDog</p>
    <a href="#title">Top</a>

  </footer>


</body>

</html>

and here is my CSS code;

body {
  font-family: "Montserrat";
  font-weight: 400;
  text-align: center;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat';
  font-weight: 900;
}

p {
  color: #8F8F8F;
}

a {
  color: #8F8F8F;
  text-decoration: none;
}

/* Headings */
.big-heading {
  font-family: "Montserrat";
  font-weight: 900;
  font-size: 3.5rem;
  line-height: 1.5;
}

.section-heading {
  font-size: 3rem;
  line-height: 1.5;
}

#title {
  background-color: #ff4c68;
  color: white;
}

.container-fluid {
  padding: 3% 15% 7%;
}

/* Navigation Bar */

.navbar {
  padding: 0 0 4.5rem;
}

.navbar-brand {
  font-family: 'Ubuntu';
  font-size: 2.5rem;
  font-weight: bold;
}

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

.nav-link {
  font-size: 1.2rem;
  font-family: 'Montserrat';
  font-weight: 100;
}

/* Download Buttons */
.download-button {
  margin: 5% 3% 5% 0;
}

.title-image {
  width: 22%;
  /* width: 60%; */
  transform: rotate(25deg);
  position: absolute;
  right: 23%;
}

/* Features */
#features {
  padding: 7% 15%;
  background-color: white;
  position: relative;
}

.feature-title {
  font-size: 1.5rem;
}

.feature-box {
  text-align: center;
  padding: 8%;
}

.icon {
  color: #EF8172;
  margin-bottom: 1rem;
}

.icon:hover {
  color: #FF4C68;
}

/* Testimonials */
#testimonials {
  text-align: center;
  background-color: #EF8172;
  color: #FFFFFF;
}

.carousel-item {
  padding: 7% 20%;
}

.testimonial-image {
  width: 10%;
  border-radius: 50%;
  margin: 20px;
}

.testimonial-text {
  font-size: 3rem;
  line-height: 1.5;
}

/* Press */

#press {
  background-color: #EF8172;
  text-align: center;
  padding-bottom: 3%;
}

.press-logo {
  width: 15%;
  margin: 20px 20px 50px;
}

/* Pricing section */
#pricing {
  padding: 100px;
  text-align: center;
}

.price-text {
  font-size: 3rem;
  line-height: 1.5;
}

.pricing-column {
  padding: 3% 2%;
}

@media (max-width: 1028px) {
  #title {
    text-align: center;
  }

  .title-image {
    position: static;
    transform: rotate(0);
    width: 60%;
  }
}

/* Call to action */
#cta {
  background-color: #FF4C68;
  text-align: center;
  padding: 7% 20%;
  color: #fff;
}

/* Footer */
#footer {
  background-color: #fff;
  padding: 7% 15%;
  text-align: center;
}

.footer-title {
  font-family: 'Montserrat'
    color: gray;
  font-size: 1.0rem;
  text-align: center;
}

.social-icon {
  color: #000;
  margin: 20px 10px;
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I had a colon in front of the 900 in the Montserrat fonts link instead of a semi-colon.


  2. 0

    I found that your google font link is incorrect just replace your font link with this.

    <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,400;0,700;1,900&display=swap" rel="stylesheet">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search