I recently added a new font from Fontsource called Girassol () by running the following command:
npm install @fontsource/girassol
In addition, I have a file named theme.ts with the following content:
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;
Next, in my file Home.tsx, the code 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, despite my efforts, I'm unable to apply the custom font I downloaded. Whenever I switch the font in my theme.ts file to something more common such as Arial or Times New Roman, the change is reflected. I seem to be struggling to make the custom font work properly. Can anyone pinpoint where I might have made a mistake?
Thank you,
Carolina