I recently attempted to incorporate the M Plus Rounded 1c font into my project by following the guidance provided by Chakra UI on using custom fonts (link: https://chakra-ui.com/community/recipes/using-fonts). However, I encountered an issue where Chakra UI did not apply the font as expected. Instead of displaying the specified font, it defaulted to a font like Times New Roman on the body of the text.
import Layout from "./layout";
import { ChakraProvider } from "@chakra-ui/react";
import "@/styles/globals.css";
import theme from "./theme";
export default function App({ Component, pageProps }) {
return (
<ChakraProvider theme={theme}>
<Layout>
<Component {...pageProps} />
</Layout>
</ChakraProvider>
);
}
import { extendTheme } from "@chakra-ui/react";
const theme = extendTheme({
fonts: {
body: `'M PLUS Rounded 1c'`,
},
});
export default theme;