Google Font Not Working with Bootstrap

Google font not working with bootstrap

Using google font on any webpage is very easy and you can load the fonts asynchronously.

If you don't use the direct code that Google font delivers and you simply load the following url:

http://fonts.googleapis.com/css?family=Open+Sans:400,600

You'd be represented the source code (CSS).

Now, copy and paste the displayed code in the CSS source of your website.

You can then use your selected google font(s) on your webpages using the following:

body
{
    background-color: #F1F1F2;
    font-family: 'Open Sans', Arial;
}

That's enough and it will work.

Bootstrap carousel & Google Font Issues

Remove # in the carousel ID id="testimonial-carousel" and everything will work
Also set the font style like this font-family: 'Montserrat', sans-serif;

/* TESTIMONIAL SECTION */
#testimonials {
  text-align: center;
  background-color: #ef8172;
  color: #fff;
}
.testimonial-img{
  width: 10%;
  border-radius: 100%;
  margin: 20px;
}
#press {
  background-color: #ef8172;
  text-align: center;
  padding-bottom: 3%;
}
.press-logo {
  width: 15%;
  margin: 20px 20px 50px;
}
.carousel-item {
  padding: 7% 15%;
}

<!DOCTYPE html>
<html>

<head>
  <!-- BOOTSTRAP SCRIPTS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

  <!-- FONT AWESOME -->
  <script src="https://kit.fontawesome.com/849c3de797.js" crossorigin="anonymous"></script>

</head>

<body>

  <!-- Testimonials -->

  <section id="testimonials">

    <div id="testimonial-carousel" class="carousel slide" data-bs-ride="false" data-pause="hover">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
          <img class="testimonial-img" 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>
        <span class="visually-hidden">Previous</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>
        <span class="visually-hidden">Next</span>
      </button>
    </div>

  </section>

</body>

</html>

Google font not displaying

Ok I got it to work! This was my first time adding multiple Css files... and I was missing this in my settings.py file

STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]

LOL, thanks for being a good community and standing by me while I solve my own problems!

Google Font Not Working with Bootstrap