Next.js集成Material UI自定义字体替换Roboto失效问题

在使用Next.js结合Material UI开发网站时，尝试替换默认的Roboto字体为IBM Plex Sans，但按照官方指南操作后始终无法生效，怀疑问题出在CssBaseline与主题的结合上。

以下是出现问题时的代码：

_app.tsx #

import { createTheme, ThemeProvider } from '@mui/material/styles'
import CssBaseline from '@mui/material/CssBaseline'

const theme = createTheme({
  typography: {
    fontFamily: [
      "\"IBM Plex Sans\"",
    ].join(','),
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        "@font-face": {
          fontFamily: "\"IBM Plex Sans\"",
          src: `url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap')`
        },
      }
    }
  }
});

export default ({Component, pageProps}:any) => <>
  <CssBaseline />
  <ThemeProvider theme={theme}>
    <Component {...pageProps} />
  </ThemeProvider>
</>

_document.tsx #

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
        <Head>
            <link rel="preconnect" href="https://fonts.gstatic.com" />
            <style>@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');</style>
        </Head>
      <body>
        <Main />
        <NextScript />
      </body>   
    </Html>
  )
}

问题根源与解决方法 #

问题出在组件的嵌套顺序上：CssBaseline必须放在ThemeProvider内部，这样才能正确读取并应用自定义主题中的字体配置。

修正后的_app.tsx代码：

import { createTheme, ThemeProvider } from '@mui/material/styles'
import CssBaseline from '@mui/material/CssBaseline'

const theme = createTheme({
  typography: {
    fontFamily: [
      "\"IBM Plex Sans\"",
      "sans-serif"
    ].join(','),
  },
});

export default ({Component, pageProps}:any) => (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <Component {...pageProps} />
  </ThemeProvider>
)

补充说明：

• 无需在MuiCssBaseline的styleOverrides中重复配置@font-face，因为_document.tsx中已经通过@import完成了字体资源的引入；
• 在字体列表中添加sans-serif作为降级选项，可提升页面在特殊环境下的兼容性。

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