I am trying to use my custom fonts via Next.js/font and using fonts in my stylesheets.

Method to declare fonts in the global.scss and modular scss files:

font-family:var(--GoodTimes-Bold) !important;

font.js to define fonts:

import localFont from 'next/font/local'

const goodTimesRegular = localFont({ src: 'GoodTimesLt-Regular.ttf', variable:"--GoodTimes-Regular"})
const goodTimesBold = localFont({ src: 'GoodTimesRg-Bold.ttf', variable:"--GoodTimes-Bold"})
const proximaNovaRegular = localFont({ src: './ProximaNova-Regular.ttf', variable:"--ProximaNova-Regular"})
const proximaNovaBold = localFont({ src: './ProximaNova-Bold.ttf', variable:"--ProximaNova-Bold"})

export { goodTimesRegular, goodTimesBold, proximaNovaRegular, proximaNovaBold }

_app.js:

<div className={` ${proximaNovaRegular.variable} ${proximaNovaBold.variable} ${goodTimesRegular.variable} ${goodTimesBold.variable}`}>
<Component {...pageProps} />
</div>

What is wrong with the above?