Html Question posted in
Some basic documentation can be found here.

Html – How to fix google fonts doesnt loaded in localhost?

I’m coding a website in localhost and trying using Google Fonts using @import url() then after i try it doesnt working
i’m sorry if i’m dont know that because i’m doesnt know about localhost so i just first time trying

<!DOCTYPE html>
   <html>
     <head>
       <title>test</title>
       <style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap')
     * {
    font-family: 'Poppins', sans-serif;
      }
    </style>
    </head>
    <body>
      <p>trying</p>
   </body>
</html>

The code above is not the original code from my website, just an example(the code same in my website)

it because the font loaded as woff2 and cant be loaded or another reason?? pls give me answer

sorry for bad english

  • because i’m not english people
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Answered

    • so the problem is i'm not put semicolon(;) in @import url()

    thx all who answered it (:


  2. 0

    I don’t think there is anything wrong in your code.

    Try two things:

    First is to add semicolon at the end of import URL and also check again if the URL is correct.

    Second is to remove space where you are using asterik mark like this:

     *{
     font-family: 'Poppins', sans-serif;
  }

    Also if this doesn’t work, try this once:

     *{
     font-family: 'Poppins', sans-serif !important;
  }
    Login or Signup to reply.
  3. 0

    Your code should work alright. As said in another answer, you can add !important. I’m answering here because, I suggest to use link in html instead of import in css. Because pages with link method is loaded faster – they say.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
 <!-- Use the Link here as follows -->   
 <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=Poppins:ital,wght@0,300;0,400;0,500;0,700;1,600&display=swap" rel="stylesheet">
</head>
<body>
    
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search