Google fonts integration

[jamietallingbell]

Hi, I'm very new to front end development so apologies if this is a silly question!

I'm trying to use a font from Google fonts on my Next.js / Chakra UI powered website, but can't quite figure out how to include a custom font in the global styles.

Thanks in advance for any advice :)

[ljosberinn]

Usually you'd just add a <link /> element to your html. Since you import a certain font name there, you can then use it as follows:

<ChakraProvider theme={extendTheme({
  fonts: {
    body: /* font name here */
  }
})}>

[jamietallingbell]

Thanks @ljosberinn! I was just typing a reply to my own message - my problems actually stemmed from a simple typo in my extended theme...

For anyone else wondering how to do this, I'd recommend either the next-google-fonts npm package, or @ljosberinn's method which seems less heavy handed.