How to use custom fonts at Chakra v3

Started using Chakra v3 and can't figure out why my fonts aren't applying to the app, colors are working fine. What is best approach using fonts from files at public folder with chakra v3?

export const system = createSystem(defaultConfig, {
theme: {
    tokens: {
        colors: colors,
        textStyles: {
            ...textStyles,
        },
        fonts: {
            heading: { value: `'Stolzl', sans-serif` },
            body: { value: `'Stolzl', sans-serif` },
        },

        breakpoints: {
            sm: '0px',
            md: '500px',
            lg: '768px',
        },
        radii: {
            blocks: '20px',
            fields: '8px',
            menu: '12px',
            personas_buttons: '50%',
        },
    },
},
components: {
    Button,
    Modal,
    ClickableIcon,
},

})

Solution

If you have a stylesheet with your font you'll need to add a <link> tag in the page's <head> so that the browser knows to load the font with the page. That way when your Chakra theme refers to "Stolzl" the browser will have that font available.

<head>
    ...
    <link rel="stylesheet" href="/stolzl-stylesheet.css" />
    ...
</head>

(If you're using Next.js, you can use the Head component to add stuff to the <head>)

If you don't have a stylesheet file, you can add the styles you need right in the <head>.

<head>
    ...
    <style>
        @font-face {
            font-family: 'Stolzl';
            src: url('/stolzl.ttf') format('truetype');
            font-style: normal;
            font-display: swap;
        }
    </style>
    ...
</head>

Hope this helps!