CODEWITHSUNDEEP
htmlcssfonts
Abhirajshri Winsome
Abhirajshri Winsome

Reputation: 175

Font not changing in CSS even after importing

I created a folder for all my fonts. Here's my html code:

<!DOCTYPE html>
<html>
<head>
    <title>Play with bulb!</title>
    <link rel="stylesheet" href="styles.css">
    <script src="app.js"></script>
</head>
<body>

   <img id="myImage" onclick="changeImage()" src="images/lightOff.gif">

   <h1 id="myText" onclick="changeText()"></h1>

</body>
</html>

And my CSS:

@import url("./fonts/Poppins-ExtraBold.ttf");

#myText {
    font-size: 30px;
    font-family: 'Poppins';
}

I also have a javascript file, but I'm not giving it as it is unrelated to this question.

For some reason, it isn't showing Poppins. Any reason why it isn't? I even checked in the inspect tab, and it showed this:

enter image description here

Upvotes: 1

Views: 1662

Answers (2)

Nilanshu96
Nilanshu96

Reputation: 157

Try using this css:

@font-face {
   font-family: 'Poppins' ;
   src: url('./fonts/Poppins-ExtraBold.ttf') format('truetype');
}

#myText {
    font-size: 30px;
    font-family: 'Poppins';
}

Upvotes: 1

Quentin
Quentin

Reputation: 944530

@import is for importing CSS, not font files.

You need @font-face to load a custom font.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

And then you can use it with the name you defined:

#myText {
    font-family: 'Open Sans';
}

Upvotes: 3

Related Questions