Font family “Poppins” not working properly on my Website when it loads

问题

first I want to thank all of the great people in this site. Without the help of SO I would be so lost.

I am trying to reference the typography from google fonts. The problem is that when I push the changes the font will be displayed on the console but, it won't render on the actual website.

Here is how I am importing to the code

<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,700,900');
</style>

.text{ 
    font-family: 'poppins-bold', sans-serif !important;
    font-size: 6.3rem;
    line-height: 1.333;
    margin-top: 0;
    color: #FFFFFF;
    text-align: center;
}

Check out the website here and see for yourself.

Any ways into fixing this?

回答1:

You can try adding the below link in the index.html (main html file) and then you can use font-family as 'poppins'.

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Poppins" />

(you have to wrap this using <> to make it a tag)

回答2:

Just add

    <style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
</style>

And then inside the css

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

来源：https://stackoverflow.com/questions/54151849/font-family-poppins-not-working-properly-on-my-website-when-it-loads