Answer Update

Thanks to the helpful suggestions above, I managed to get the fonts working. However, in my case, I needed to apply the !important directive to the body font style to ensure it overrides any other font-family settings that might be present in my project.

Here’s my full working theme.ts:

import { createSystem, defaultConfig } from "@chakra-ui/react";

export const system = createSystem(defaultConfig, {
theme: {
    tokens: {
    fonts: {
        heading: { value: `'Bebas Neue', sans-serif` },
        body: { value: `'Poppins', sans-serif` },
    },
    shadows: {
        outline: { value: "0 0 0 3px rgba(225, 92, 66, 0.5)" },
    },
    },
    recipes: {
    input: {
        base: {
        _focus: {
            boxShadow: "outline",
        },
        },
    },
    },
},
globalCss: {
    "html, body": {
       fontFamily: "body !important",
    },
    "h1, h2, h3, h4, h5, h6": {
       fontFamily: "heading",
    },
},
});
export default system;

Explanation:

• Poppins is applied to all non-heading text globally by using the fontFamily style with the !important rule. This ensures that Poppins is applied regardless of any other conflicting styles.

• Bebas Neue is applied to the heading elements (h1, h2, h3, h4, h5, h6), as intended.

I hope this helps someone else who’s facing similar issues. Thanks again for the guidance!