我一直在尝试在我的Next js应用程序中使用Montserrat字体。当我在浏览器中检查文本时，字体系列总是自动的，并且有相同的后备。
“Roboto”，“Helvetica”，“Arial”，sans-serif
我还没有在我的应用程序中将此设置作为我的字体系列。如何更改此字体系列。
我尝试创建一个主题并将其提供给应用程序。
我将montserrat从next/font/google导入到名为fonts.js的文件中

import { Montserrat } from 'next/font/google';

const montserrat = Montserrat({
  weight: ['300', '400', '500', '700'],
  subsets: ['latin'],
  display:'swap',
  fallback: ['Arial', 'sans-serif'],
});

export default montserrat;

这就是我如何创建一个黑暗主题。

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:{
      allVariants:{
        fontFamily:montserrat.style.fontFamily
      }
    },
  },
});

const darkTheme = responsiveFontSizes(theme);

export default darkTheme;

我在这个material ui next js example中使用了这种方法
这是我的自定义应用程序文件

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 '../styles/globals.css';

const clientSideEmotionCache = createEmotionCache();

const MyApp = (props) => {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  return (
    <CacheProvider value={emotionCache}>
      <ThemeProvider theme={darkTheme}>
        <CssBaseline />
        <main>
          <Component {...pageProps} />
        </main>
      </ThemeProvider>
    </CacheProvider>
  );
};

export default MyApp;

我已经安装了这些npm包。

"@emotion/cache": "^11.10.8",
    "@emotion/react": "^11.10.8",
    "@emotion/server": "^11.10.0",
    "@emotion/styled": "^11.10.8",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.12.3",