CODEWITHSUNDEEP
cssreactjssassnext.jssanity
Sachin Titus
Sachin Titus

Reputation: 2339

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?

Upvotes: 2

Views: 2253

Answers (3)

Dim00n
Dim00n

Reputation: 1

You just need to edit the index.js, remove the font "Inter" import and style references from it.

Upvotes: 0

Oliver Heward
Oliver Heward

Reputation: 461

Download the font family, personally I like to run them through transfonter.org to make them browser compatible as well. Tick the following boxes:

  • TTF
  • EOT
  • WOFF
  • WOFF2

On download it will then provide you all the fonts with a @font-face stylesheet which will handle the different font face declarations for you as well then just fix your file paths.

@font-face {
  font-family: 'Badhorse';
  src: url('../../assets/fonts/Badhorse-Regular.eot');
  src: url('../../assets/fonts/Badhorse-Regular.eot?#iefix')
      format('embedded-opentype'),
    url('../../assets/fonts/Badhorse-Regular.woff2') format('woff2'),
    url('../../assets/fonts/Badhorse-Regular.woff') format('woff'),
    url('../../assets/fonts/Badhorse-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

 font-family: "Badhorse", san-serif; // ensure fallback system fonts

Upvotes: 1

Yilmaz
Yilmaz

Reputation: 49182

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";

Upvotes: 2

Related Questions