How do I access different font weights in NextJS?

Question

I am stumped as to what I'm doing wrong. I have this code in my head:

<link
href="https://fonts.googleapis.com/css2family=Montserrat:wght@300;400;200&display=swap"
rel="preload"
as="font"
crossOrigin="anonymous"
/>

And in my code I believe to access the Montserrat Extra Light font I should just write:

font-family: 'Montserrat';
font-weight:200;

But the font showing is not Montserrat ExtraLight

Anyone know why this isn't working? Am I doing something dumb?

Answer 1

I was recently dealing with the same issue and just made sure the html and body tag in my globals.css had

font-family: 'futura-pt, sans-serif; font-weight: 300 500 700 900; // range of weight

and my specific css stylesheet for the targeted element had

 font-weight: 500 

(header.module.css)

I'm going to also assume you that your font link is in the head of a _document.js file and not next/head from import.

I mainly followed both these articles: https://nextjs.org/docs/basic-features/font-optimization https://www.dharsh.dev/blog/variable-web-fonts-with-nextjs-and-tailwindcss

Hope this helps!