Unable to use custom font from next/font/google

[allenhartwig]

I am following the custom font guide to utilize a next/font/google font in my project, however, when running panda codegen I get the error:

Import "Poppins" will always be undefined because the file "node_modules/next/font/google/index.js" has no exports [import-is-undefined]

Any ideas on how to resolve?

[segunadebayo]

This sounds like you added the next font directly to the panda config.

Ideally, you should:

• load the font in the layout file (using a variable)

export const FiraCode = Fira_Code({
  weight: ['400', '500', '700'],
  display: 'swap',
  subsets: ['latin'],
  variable: '--font-fira-code'
})

• reference the font variable in your panda config

export default defineConfig({
  theme: {
    extend: {
      tokens: {
        fonts: {
          fira: { value: 'var(--font-fira-code), Menlo, monospace' },
        }
      }
    }
  }
})

https://panda-css.com/docs/guides/fonts#update-panda-config

[allenhartwig]

Thanks @segunadebayo, that did the trick! It wasn't clear to me from the docs where that code was living. I had moved it into the Panda config so I could reference FireCode.variable to DRY out the reference.

[cgatian]

☝️ I was also confused when I read that part!