Search code examples
cssreactjssassnext.jssanity

NextJs Google fonts issue - Only one font gets displayed

I'm connecting Google Fonts link to the HEAD section in _app.js file of my NextJs application. The link contains two fonts.

https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Poppins:wght@400;700&display=swap

However when I mention font-family in sass files of modules, they don't seem to work. The webpage is displaying default browser fonts. How can I tackle this?

Solution

  • Download the fonts. it will download too many variation. pick ones that you want and copy them to "public/fonts" directory.

    Then in main.scss (or in a partial), use it like this:

    @font-face {
  font-family: "PressStart2P";
  src: url("/fonts/PressStart2P-Regular.ttf");
  font-weight: normal;
  font-style: italic;
}

    now you can use this family in scss as follow:

    font-family: "PressStart2P";