已安装Material-UI的Next.js项目导入自定义Google字体不生效

问题排查及解决方法 #

• 原因1：仅MUI组件继承主题字体，原生HTML标签不生效
  MUI的主题字体配置默认仅作用于<Typography>组件以及基于该组件封装的内置组件（如Button、Input等），如果你的页面中使用了原生的<p>、<h1>、<span>等标签，不会自动应用配置的字体。
  解决方法：
  在theme.js中添加CssBaseline全局覆盖配置，让原生标签也继承自定义字体：

import { createTheme } from "@material-ui/core/styles";

const theme = createTheme({
  typography: {
    fontFamily: "'Lobster', sans-serif",
    textTransform: "none",
  },
  // 新增全局样式覆盖
  overrides: {
    MuiCssBaseline: {
      '@global': {
        body: {
          fontFamily: "'Lobster', sans-serif",
        },
        // 可选：强制统一所有元素的字体
        '*': {
          fontFamily: "'Lobster', sans-serif !important",
        }
      }
    }
  }
});

export default theme;

• 原因2：样式优先级冲突
  如果项目中存在其他全局CSS文件、内联样式或者第三方样式库，可能优先级高于MUI的主题样式，覆盖了字体配置。可以打开浏览器开发者工具的元素面板，选中文字元素查看生效的fontFamily属性，确认是否被其他样式覆盖。
• 原因3：字体资源加载失败
  打开浏览器网络面板，过滤font类型的请求，确认Lobster字体的请求返回状态正常，没有出现404、跨域等加载失败的问题。
• 原因4：版本不兼容
  如果你实际使用的是MUI v5（包名为@mui/material），当前的导入和配置方式存在问题，v5的createTheme需从@mui/material/styles导入，且主题配置结构存在差异，需要对应调整配置。

内容的提问来源于stack exchange，提问作者ksusha-beep