如何为使用MUI组件的NextJS应用全局设置Montserrat字体？

问题描述 #

在NextJS应用中尝试使用Montserrat字体，但浏览器检查文本时始终显示Roboto及后备字体：

"Roboto","Helvetica","Arial",sans-serif

未手动设置过该字体集，已通过next/font/google导入Montserrat并配置主题，但字体未生效。

错误原因分析 #

你的darkTheme配置存在结构错误：typography被错误嵌套在palette对象内部，而Material UI的createTheme要求typography与palette是同级属性，导致字体配置未被正确读取。

修复步骤 #

1. 修正主题配置结构 #

将typography从palette中移出，作为createTheme的顶级属性：

import { createTheme, responsiveFontSizes } from '@mui/material/styles';
import montserrat from '../../utility/fonts';

const theme = createTheme({
  palette: {
    primary: {
      main: '#202126',
    },
    secondary:{
      main:'#dddddd'
    },
    text:{
      primary:'#dddddd',
    },
  },
  // 将typography移至顶层，与palette同级
  typography:{
    allVariants:{
      fontFamily: montserrat.style.fontFamily,
    },
  },
});

const darkTheme = responsiveFontSizes(theme);

export default darkTheme;

2. 确保字体样式全局生效 #

在自定义App组件中，将Montserrat的字体类名添加到根元素，确保全局应用：

import { CacheProvider } from '@emotion/react';
import { ThemeProvider, CssBaseline } from '@mui/material';
import PropTypes from 'prop-types';
import createEmotionCache from '../utility/createEmotionCache';
import darkTheme from '../styles/theme/darkTheme';
import montserrat from '../utility/fonts';
import '../styles/globals.css';

const clientSideEmotionCache = createEmotionCache();

const MyApp = (props) => {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  return (
    <CacheProvider value={emotionCache}>
      <ThemeProvider theme={darkTheme}>
        <CssBaseline />
        {/* 为根容器添加字体类名 */}
        <main className={montserrat.className}>
          <Component {...pageProps} />
        </main>
      </ThemeProvider>
    </CacheProvider>
  );
};

export default MyApp;

3. 排查全局样式冲突 #

检查globals.css中是否存在全局字体设置，比如：

body {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

如果有，将其替换为：

body {
  font-family: var(--font-montserrat), Arial, sans-serif;
}

或直接移除该规则，让Material UI主题的字体配置优先级更高。

额外验证点 #

• 确认next/font/google的Montserrat配置已指定所需字重和子集
• 清除浏览器缓存后重新加载页面，避免缓存的Roboto字体干扰
• 检查浏览器控制台是否存在字体加载失败的报错信息

内容的提问来源于stack exchange，提问作者Ram Kumar