because you didn't define it as a CSS variable, you need to do it explicitly with the variable property:

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
})