如何在mui主题中插入字体

在index.css 文件中我有一个字体。 我想完全避免这个文件，并将这个配置放在作为 MUI 库实现的一部分创建的 theme.js 文件中。怎么做？

// 索引.css

@font-face {
  font-family: 'ATTAleckSans_W_Lt';
  src: url('./fonts/ATTAleckSans_W_Lt.woff2');
}

// 主题.js

const theme = createTheme({
// configure @font-face here.
})

代码沙箱 https://codesandbox.io/s/configure-font-face-sofl-h6q39p Demo

看一下类似的答案，解释如何做到这一点。

https://stackoverflow.com/a/73401472/5376404 https://stackoverflow.com/a/73401472/5376404

安装字体后，您可以像这样在主题中设置它（在我的示例中，我已将字体设置为 Monserrat）

import { createTheme } from '@mui/material/styles';

export const theme = createTheme({
  typography: {
    fontFamily: ['Montserrat', 'serif'].join(','),
    button: {
      fontSize: 16,
      fontWeight: 400,
    },
  }
});