React+Material UI本地字体加载失败：我哪里操作有误？

我正尝试在React项目中加载本地字体，当前处于开发模式（npm run start）而非生产环境。已按照Material UI官方文档操作，但未成功。字体存储在path/to/react-project/src/fonts目录下，代码片段如下：

import { ThemeProvider, createTheme } from '@mui/material/styles';
import ProximaNovaReg from '../fonts/Proxima-Nova-Reg.ttf';
import ProximaNovaIt from '../fonts/Proxima-Nova-It.otf';
import ProximaNovaBold from '../fonts/Proxima-Nova-Bold.otf';
import FuturaBold from '../fonts/Futura-Bold.ttf';


const theme = createTheme({
  typography: {
    fontFamily: [
      'Proxima-Nova',
      'sans-serif',
    ].join(','),
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: `
        @font-face {
          font-family: 'Proxima-Nova';
          font-style: normal;
          font-display: swap;
          font-weight: 400;
          src: url(${ProximaNovaReg}) format('truetype')
        }
        @font-face {
          font-family: 'Proxima-Nova';
          font-style: italic;
          font-display: swap;
          font-weight: 400;
          src: url(${ProximaNovaIt}) format('otf')
        }
        @font-face {
          font-family: 'Proxima-Nova';
          font-style: normal;
          font-display: swap;
          font-weight: 700;
          src: url(${ProximaNovaBold}) format('otf')
        }
        @font-face {
          fontFamily: 'Futura';
          fontStyle: 'normal';
          fontDisplay: 'swap';
          fontWeight: 700;
          src: url(${FuturaBold}) format('truetype')
        }
      `,
    },
  },
});

// ...
return (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <Box
      sx={{
        fontFamily: 'Proxima-Nova',
      }}
    >
      Proxima-Nova
    </Box>
  </ThemeProvider>
);

package.json："@mui/material": "^5.10.1"

请问我哪里操作出错了？

错误点排查 #

• @font-face属性名格式错误：最后一个Futura的@font-face中使用了驼峰命名（fontFamily、fontStyle、fontDisplay），CSS标准要求用短横线分隔的属性名（font-family、font-style、font-display），浏览器无法识别驼峰属性，会导致该字体加载失败，甚至影响整体样式解析。
• OTF字体format值错误：CSS中OTF格式字体的format参数应为'opentype'，而非'otf'，otf不是标准取值，会导致浏览器无法正确识别字体格式。
• CSS语法缺失分号：前三个@font-face的src行末尾未加分号，虽然部分浏览器有容错机制，但严格来说属于语法错误，可能中断样式解析流程。

修正后的代码片段 #

import { ThemeProvider, createTheme } from '@mui/material/styles';
import ProximaNovaReg from '../fonts/Proxima-Nova-Reg.ttf';
import ProximaNovaIt from '../fonts/Proxima-Nova-It.otf';
import ProximaNovaBold from '../fonts/Proxima-Nova-Bold.otf';
import FuturaBold from '../fonts/Futura-Bold.ttf';


const theme = createTheme({
  typography: {
    fontFamily: [
      'Proxima-Nova',
      'sans-serif',
    ].join(','),
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: `
        @font-face {
          font-family: 'Proxima-Nova';
          font-style: normal;
          font-display: swap;
          font-weight: 400;
          src: url(${ProximaNovaReg}) format('truetype');
        }
        @font-face {
          font-family: 'Proxima-Nova';
          font-style: italic;
          font-display: swap;
          font-weight: 400;
          src: url(${ProximaNovaIt}) format('opentype');
        }
        @font-face {
          font-family: 'Proxima-Nova';
          font-style: normal;
          font-display: swap;
          font-weight: 700;
          src: url(${ProximaNovaBold}) format('opentype');
        }
        @font-face {
          font-family: 'Futura';
          font-style: normal;
          font-display: swap;
          font-weight: 700;
          src: url(${FuturaBold}) format('truetype');
        }
      `,
    },
  },
});

// ...
return (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <Box
      sx={{
        fontFamily: 'Proxima-Nova',
      }}
    >
      Proxima-Nova
    </Box>
  </ThemeProvider>
);

额外验证步骤 #

• 检查字体路径：确认../fonts/xxx的导入路径相对于当前组件文件的位置正确，可在浏览器控制台Network标签查看字体文件是否以200状态码成功加载。
• 清除缓存：开发模式下浏览器可能缓存旧资源，可通过Ctrl+Shift+R强制刷新页面。
• 验证样式生效：在浏览器DevTools的Elements标签中查看Box元素的computed样式，确认font-family已正确应用，且字体文件已加载。

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