Search code examples
htmlcssfontsfont-family

Why is my font not appearing as it did on google fonts?

I have gotten two fonts from google fonts, and have applied them to my CSS document. Then I added them to my document, but they don't show up as what appeared on the website for some reason.

Here is my code:

@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@500&family=Libre+Baskerville&display=swap');

h1, h2, h3, h4, h5, h6 {
  font-family: 'League Spartan', sans-serif;
}

p {
  font-family: 'Libre Baskerville', serif;
}

Here is the link to both fonts:

https://fonts.google.com/specimen/Libre+Baskerville?query=libre+bas&preview.text=Lorem%20Ipsum&preview.text_type=custom

https://fonts.google.com/specimen/League+Spartan?query=league+&preview.text=Lorem%20Ipsum&preview.text_type=custom

Solution

  • I have found what it is: The @import has to be at the top of the stylesheet, before any other css.