Use next/font in chakra ui?

[fuma-nama]

I had tried to do this with CSS variables but it does nothing

//index.tsx
import { Inter } from "@next/font/google";
import { Heading } from "@chakra-ui/react";
import { AppLayout } from "@/layouts/AppLayout";

const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });

export default function Home() {
    return (
        <>
            <main className={inter.variable}>
                <AppLayout>
                    <Heading>Hello World</Heading>
                </AppLayout>
            </main>
        </>
    );
}

//theme.tsx
fonts: {
    heading: `var(--font-inter)`,
    body: `var(--font-inter)`,
},

The documentation hasn't mentioned it, any help?

[ikoif]

@SonMooSans you can do something like this:
pages/_app.tsx

import { Montserrat } from '@next/font/google'
import type { AppProps } from 'next/app'
import { ChakraProvider, Text } from '@chakra-ui/react'
import { extendTheme } from '@chakra-ui/react'

const montserrat = Montserrat({ subsets: [ 'cyrillic' ] })
const theme = extendTheme({
  fonts: {
    montserrat: montserrat.style.fontFamily,
  },
})

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider theme={theme}>
      <Text fontFamily='montserrat'>I am Montserrat</Text>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

[KubaZachacz]

@ikoif perfect, but how about using it with Chakra CLI?
I guess I'm getting Error: @next/font/google failed to run or is incorrectly configured. because of it.

[Adamec19]

i have a same issue...

[fdFloresMarquez]

You can edit your Heading and Body in the theme as well so your don't have to specify all components. Although I don't see my font unless I specify display: 'swap' .

theme/theme.ts

import { Montserrat } from '@next/font/google';
// 1. Import the extendTheme function
import { extendTheme } from '@chakra-ui/react';

const montserrat = Montserrat({ subsets: ['cyrillic'], display: 'swap' });

const fonts = {
  heading: montserrat.style.fontFamily,
  body: montserrat.style.fontFamily,
};

export const theme= extendTheme({
  fonts,
});

[Adamec19]

im getting this Error: @next/font/google failed to run or is incorrectly configured.
Does anyone know how to fix it?

[riceboyler]

@Adamec19 I'm seeing the same and I think the reason may be that we're using it in a "non-page". In my case, I'm trying to override the font-family name in our design tokens (which are in a separate library in our monorepo). I think that @next/font may not be configured to work outside of a .jsx/tsx page. The documentation on @next/font is a little spotty, so this is totally conjecture, but I'm going to try passing in the font family from _app.tsx into my theme definition and see if that works better. (I'll report back.)

[pepijnvandenhoven]

@riceboyler did you have any luck with this? I tried adding the font to _app.tsx and importing it in my theme. When I now run chakra-cli tokens, I don't get the error, but it seems to hang on ⠹ Generating chakra theme typings

[riceboyler]

@pepijnvandenhoven We're not actually using chakra design tokens (we're using Supernova currently), so I don't see the same issues there. I did confirm that @next/font can only be run on a .jsx|tsx file or you get the error indicated above. So, it seems that in order for it to work, it HAS to be in the _app.[j|t]sx file explicitly.

[Naoto-Ida]

@riceboyler Thank you so much, your comment about _app.tsx saved me and my team a lot of time!

[retrospct]

Just want to add another way of doing this.

1. You can set the next/font to a CSS variable when initializing it in _app.tsx
2. Then you can set that CSS variable to the Chakra UI theme fonts using extendTheme()

// _app.tsx
import type { AppProps } from 'next/app'
import { theme } from '../theme'
import { Inter } from 'next/font/google'

// set inter to CSS var --font-inter
const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })

function MyApp({ Component, pageProps }: AppProps<{ initialSession: Session }>) {
  return (
    // load the font in the app globally through className={inter.className}
    <main className={inter.className}>
      // set ChakraUI to use the extended or custom theme using the CSS var for your font
      <ChakraProvider theme={theme}>
        <Component {...pageProps} />
      </ChakraProvider>
    </main>
  )
}

// theme.ts
import type { ThemeConfig, ThemeOverride } from '@chakra-ui/react'
import { extendTheme } from '@chakra-ui/react'

const base: ThemeOverride = {
  ...
  // use the CSS var name set in _app.tsx when initializing the font
  fonts: {
    heading: `var(--font-inter), sans-serif`,
    body: `var(--font-inter), sans-serif`,
    mono: `'Menlo', monospace`
  },
  ...
}

export const theme: ThemeOverride = extendTheme(base)