Google fonts integration #2287
-
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 :) |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
Usually you'd just add a <ChakraProvider theme={extendTheme({
fonts: {
body: /* font name here */
}
})}> |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
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: