If its not working, try this add variable prop to font object: const inter = Inter({subsets: ['latin'], variable: '--font-inter'}) provide variable prop instead of className and use this variable where you need it: font-family: var(--font-inter) and if you using tailwind, add fontFamily object to your tailwind.config.js extend: { fontFamily: { inter: 'var(--font-inter)', poppins: 'var(--font-poppins)', }, after that you can use it like this