Next.js 13 introduces a brand new font system which downloads the fonts at build time and serves them static⚡️
How to use @next/font combined with chakra-ui
Create a theme file for chakra-ui:
// theme.ts
import { extendTheme } from '@chakra-ui/react';
const theme = extendTheme({});
export default theme;
Then import your font as the Next docs describe, I'm going for Averia Serif Libre.
// theme.ts
import { extendTheme } from '@chakra-ui/react';
import { Averia_Serif_Libre } from '@next/font/google';
// Import the weights and subsets, add any other config here as well
const nextFont = Averia_Serif_Libre({
weight: ['400'],
subsets: ['latin'],
});
const theme = extendTheme({
// Set the fonts like this
fonts: {
body: nextFont.style.fontFamily,
heading: nextFont.style.fontFamily,
},
});
export default theme;
Top comments (6)
I made an account just to say thanks this answered my question after an hour of searching!
Happy to help!
Great article, you got my follow, keep writing!
Thank you for this article
Thanks!!!