如何在NextJS与MUI项目中更换字体为Oswald？

方法一：使用Next.js内置的next/font（推荐，性能最优） #

这种方式会自动预加载字体，无需额外网络请求，适配Next.js 13+的Pages Router和App Router。

1. 在全局入口文件中配置字体与MUI主题 #

• Pages Router（pages/_app.js/pages/_app.tsx）

import { Oswald } from 'next/font/google'
import { ThemeProvider, createTheme } from '@mui/material/styles'
import CssBaseline from '@mui/material/CssBaseline'

// 配置Oswald字体，按需选择需要的字重
const oswald = Oswald({
  subsets: ['latin'],
  weight: ['300', '400', '500', '600', '700'],
})

// 创建自定义MUI主题，替换默认字体
const theme = createTheme({
  typography: {
    fontFamily: `${oswald.style.fontFamily}, sans-serif`,
  },
  // 若部分MUI组件未自动继承全局字体，可单独覆盖样式（示例为按钮组件）
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          fontFamily: `${oswald.style.fontFamily}, sans-serif`,
        },
      },
    },
  },
})

export default function App({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <div className={oswald.className}>
        <Component {...pageProps} />
      </div>
    </ThemeProvider>
  )
}

• App Router（app/layout.js/app/layout.tsx）

import { Oswald } from 'next/font/google'
import { ThemeProvider, createTheme } from '@mui/material/styles'
import CssBaseline from '@mui/material/CssBaseline'

const oswald = Oswald({
  subsets: ['latin'],
  weight: ['300', '400', '500', '600', '700'],
  // 通过CSS变量全局注入字体
  variable: '--font-oswald',
})

const theme = createTheme({
  typography: {
    fontFamily: 'var(--font-oswald), sans-serif',
  },
})

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN" className={oswald.variable}>
      <body>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

2. 验证配置 #

启动项目后，查看页面元素的font-family样式，确认已替换为Oswald字体。

方法二：通过CDN引入（性能略差） #

1. 获取Oswald字体的CDN引入代码，添加到Next.js全局文档的Head标签中（Pages Router修改_document.js，App Router修改layout.js）。
2. 在MUI主题配置中，设置typography.fontFamily为"Oswald", sans-serif，步骤同方法一的主题配置部分。

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