Chakra UI字体异常：配置M PLUS Rounded 1c后未生效

问题核心是仅在Chakra主题中指定字体名称，但未实际加载字体文件，浏览器找不到对应字体时会回退到系统默认字体（比如Times New Roman）。按以下步骤修复：

1. 引入字体文件 #

你需要先加载M PLUS Rounded 1c字体文件，推荐用Google Fonts的CDN方式：

方式一：在_app.js中添加link标签 #

修改你的_app.js，在ChakraProvider外部引入字体：

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 (
    <>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;500;700&display=swap" />
      <ChakraProvider theme={theme}>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </ChakraProvider>
    </>
  );
}

方式二：在globals.css中用@import引入 #

打开globals.css，添加：

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;500;700&display=swap');

2. 完善主题字体配置 #

给字体添加fallback选项（比如sans-serif），同时确保字体名称和引入的一致：

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

const theme = extendTheme({
  fonts: {
    body: `'M PLUS Rounded 1c', sans-serif`,
  },
});

export default theme;

3. 排查样式冲突 #

检查globals.css或其他自定义样式中，是否直接给body设置了font-family，如果有需要删除或调整优先级，确保Chakra的样式能覆盖。

完成以上步骤后，浏览器就能正确加载并显示M PLUS Rounded 1c字体了。

内容的提问来源于stack exchange，提问作者Ky Ma