fonts - 使用 Material-UI 的自定义字体系列

Question

我有一个启动并运行的 Material-UI React 应用程序，我正在尝试向应用程序添加新字体，但遇到了一些问题。

按照这里的教程https://material-ui.com/customization/typography/，这就是主题文件的样子。

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

import NeoSansPro from './fonts/Neo-Sans-Pro.ttf';

const neoSansPro = {
  fontFamily: 'NeoSansPro',
  fontStyle: 'normal',
  fontDisplay: 'swap',
  fontWeight: 400,
  src: `
    local('NeoSansPro'),
    url(${NeoSansPro}) format('ttf')
  `,
  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',
};

const appTheme = createMuiTheme({
  ...
  typography: {
    fontFamily: 'NeoSansPro, Arial',
  },
  overrides: {
    MuiCssBaseline: {
      '@global': {
        '@font-face': [neoSansPro],
      },
    },
  },
  ...
});

在应用程序的任何地方，字体都回落到Arial。为了让字体`NeoSansPro 与我的应用程序一起工作，我是否缺少一些东西？