Chakra-UI custom font not rendering

Question

I am trying to add a custom font by extending the theme in chakra-ui but the font doesn't render.

This is my custom theme and i pass it to the chakra provider .

import { extendTheme } from "@chakra-ui/react";
import "@fontsource-variable/nunito-sans";

const myTheme = extendTheme({
  fonts: {
    body: `'nunito-sans', sans-serif`,
    heading: `'nunito-sans', sans-serif`,
    mono: "Menlo, monospace",
  },
});

export default myTheme;

What i've noticed is that the theme does change, while the fallback font (sans-serif) gets applied custom font (nunito-sans) doesn't.

Am i doing something wrong?

Answer 1

From the Fontsource docs, use 'Nunito Sans Variable' for the font name instead of 'nunito-sans'.