Chakra UI: Can't set custom font from Fontsource

Question

I installed a font from Fontsource called Girassol (https://fontsource.org/fonts/girassol) as so:

npm install @fontsource/girassol

I also have a theme.ts file which looks like this:

import { extendTheme } from "@chakra-ui/react";

const customTheme = extendTheme({
  components: {
    Text: {
      variants: {
        logo: {
          bgGradient: "linear-gradient(45deg, #20b2aa, #cc0000)",
          textFillColor: "transparent",
          bgClip: "text",
          fontFamily: "Girassol, sans-serif",
          fontWeight: "800",
          as: "span"
        },
      },
    },
  },
});

export default customTheme;

I then have a Home.tsx file which looks like this:

import { Text } from "@chakra-ui/react";
import "@fontsource/girassol"

export function Home() {
  return (
  <Text variant={"logo"} as={"span"}>
    Some Text
  </Text>
  );
}

However, I can't get the font to change to what I downloaded. If I change the font in my theme.ts file to something more "standard" like Arial or Times New Roman, the font changes to match. However, I can't seem to get the custom font to work... Can anyone see where I've gone wrong?

Thanks,

Carolina

Answer 1

Figured it out!

I added import "@fontsource/girassol" to my main.tsx file (the file where I import my ChakraProvider).

After I did this, I started getting the exact same error as in this post, which also helpfully explains what the error means.

I didn't follow the solution in the post however. I simply realised that the @fontsource folder was in the wrong place. It should be located with the node_modules folder of my local repository folder but instead it was just located in another node_modules folder outside of my repo. So I just copy-pasted it to the right folder and it worked!