小编Tog*_*ren的帖子

目前我正在使用 ReactJS 的 Material-UI 设置我的第一个项目。例如，因为我想使用自定义字体（托管在服务器上，而不是 Google 字体或类似字体）来自定义默认主题，所以我开始着手解决这个问题。

然而，虽然在构建过程中或在浏览器控制台中没有收到任何错误，但它只是不会加载。我已经尝试了 StackOverflow 和 Material-UI 存储库中提出的多种解决方案，但我无法让它工作，因此我不知道下一步该怎么做。

我已经尝试了 StackOverflow 上的其他线程、官方 Material-UI 文档和 Material-UI GitHub 存储库上的问题中建议的几种方法，但无济于事。我可能忽略了一些明显的东西，或者混淆了不同的概念，所以任何帮助都将不胜感激:)

主题定义：

import {createMuiTheme} from "@material-ui/core";

import Penna from "./../../assets/fonts/penna.otf";

const pennaFont = {
    fontFamily: 'Penna',
    fontStyle: 'normal',
    fontDisplay: 'swap',
    fontWeight: 400,
    src: `
    local('Penna'),
    url(${Penna})
  `,
}

const MUI_THEME = createMuiTheme({
    typegraphy: {
        fontFamily: ['Penna', "'Helvetica Neue'", 'Helvetica', 'Arial', 'sans-serif'].join(","),
        fontSize: "16px",
        fontWeightLight: "300",
        fontWeightRegular: "400",
        fontWeightMedium: "700",
    },
    overrides: {
        MuiCssBaseline: {
            '@global': {
                '@font-family': [pennaFont],
            },
        },
    }, …