Use next imported fonts on scss variables

Question

I'm working with Next13 and I'm having problems when I try to use Next font variable on my scss files.

This is my font declaration on app/layout.tsx:

const montserrat = Montserrat({
  weight: ['400'],
  style: ['normal'],
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-montserrat'
});´

This is how I'm trying to declare a sass variable:

$font-body: var(--font-montserrat);

The other variables are working but when I try to associate this to a css font-family property, the font does not change and it stays with the default browser font.

I know I can use it on jsx element's className like this className={montserrat.className} but I would like to apply font-family on styles files.

Answer 1

I am pretty sure you can go the traditional way using font-face:

@font-face {
  font-family: myXfonts;
  src: url(myXfonts.woff);
}

Then declare your variable

$font-body: 'myXfonts';

I suppose no benefits from Next.js font optimization will apply, but it works.