The css font is not working

Question:
So I was making a website and the font was working well but after some time it wasn’t working, I set the font to font-family: 'Poppins', sans-serif;
Repl link/Link to where the bug appears:

Screenshots, links, or other helpful context:

style.css
body {
  font-family: Poppins, sans-serif;
  background-color: #f9f9f9;
  color: #333;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="LOGO2-removebg-preview.png">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <style>
        /* Your additional CSS styles here */
    

      .bmc-button img {
          width: 60px; /* Adjust button size */
          height: auto;
      }
      #cookie-banner {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          background-color: #333;
          color: #fff;
          padding: 10px 20px;
          text-align: center;
      }

      #cookie-banner button {
          background-color: #fff;
          color: #333;
          border: none;
          padding: 5px 10px;
          cursor: pointer;
      }
      #cookie {
        background-color: blue;
        border-radius: 5%;
      }
    </style>
</head>
<body>
    <header>
        <div class="logo-container">
            <img src="LOGO2-removebg-preview.png" alt="">
            <h1></h1>
        </div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Educational Videos</a></li>
                <li><a href="quiz.html">Quiz Zone</a></li>
                <li><a href="f.activites.html">Fun Activities</a></li>
                <li><a href="#">About</a></li>
                <!-- Add more navigation links as needed -->
            </ul>
        </nav>
        <a href="">Subscribe</a>
    </header>

    <main>
        <section class="video-container">
            
            </div>
        </section>
    </main>

    <footer>
       
        </div>

        <!-- Your website content goes here -->

        
              
    </footer>
</body>
</html>

Hello @ZeeshanAmin!

Most browsers do not have the font “Poppins” installed, so you need to link the font like this in CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins');
2 Likes

Hey @ZeeshanAmin!

If this code is what is in your style.css make sure to do what Faries0feast said
But also you should make sure your code uses the quotes around an imported font name →

/* style.css */

body {
  font-family: ‘Poppins’, sans-serif;
  background-color: #f9f9f9;
  color: #333;
} 
1 Like

That’s not a requirement, see:

Though perhaps you need the @font-face for that, not sure:

2 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.