Fonts in Next.js 13 + Chakra-UI

#nextjs #chakraui #javascript #react

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;