**目标：**我正在尝试使用MUI主题覆盖默认字体。
**问题：**在阅读了MUI文档和堆栈溢出研究之后，我无法在主题中全局覆盖自托管字体。
主题文件：

import { createTheme } from "@mui/material/styles";
import VCRMonoWoff2 from './fonts/VcrMono.woff2';
import VCRMonoWoff from './fonts/VcrMono.woff';

const theme = createTheme({
    typography: {
      fontFamily: 'VCRMono',
    },
    components: {
      MuiCssBaseline: {
        styleOverrides: `
          @font-face {
            font-family: 'VCRMono';
            font-weight: normal;
            font-style: normal;
            src: url(${VCRMonoWoff2}) format('woff2'), url(${VCRMonoWoff}) format('woff');
            unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
          }
        `,
      },
    },
  });
export default theme;

用途：

import { ThemeProvider } from 'react-bootstrap';
import { CssBaseline } from '@mui/material';
import Box from '@mui/material/Box';

import theme from './theme';

export default function Example() {
    return (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <Box>Example3</Box>
  </ThemeProvider>
);
}

这不会将我的主题排版更新为新字体，但是，如果我运行这段代码，字体会更新为VCRMono：

export default function Example() {
    return (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <Box sx={{
        fontFamily: 'VCRMono',
      }}>Example3</Box>
  </ThemeProvider>
);
}

虽然，这并不符合我的目标，因为我试图覆盖默认字体全局。
MUI自托管字体文档指出：“您需要更改主题以使用此新字体。为了全局定义为字体风格，可以使用CssBaseline组件。”我尝试重复这些步骤，但无法完成任务。
任何帮助我都感激不尽。谢谢。