我是波斯人，我们的语言字体非常非常像阿拉伯字体。对于我的项目，我创建了一个单独的文件，并将其命名为globalStyles.js：

import { createStyles } from '@material-ui/core';
import yekanRegularTtf from '../app/assets/font/iranyekanwebregular.ttf';
import yekanRegularWoff from '../app/assets/font/iranyekanwebregular.woff';
import yekanRegularWoff2 from '../app/assets/font/iranyekanwebregular.woff2';
import yekanBoldTtf from '../app/assets/font/iranyekanwebbold.ttf';
import yekanBoldWoff from '../app/assets/font/iranyekanwebbold.woff';
import yekanBoldWoff2 from '../app/assets/font/iranyekanwebbold.woff2';

const globalStyles = ({ spacing, typography, colors }) =>
  createStyles({
    '@global': {
      '@font-face': [
        {
          fontFamily: 'IRANYekan',
          fontStyle: 'normal',
          fontWeight: 400,
          src: `url(${yekanRegularWoff2}) format('woff2')`,
          fallbacks: {
            src: [
              `url(${yekanRegularWoff})`,
              `url(${yekanRegularTtf}) format('truetype')`,
            ],
          },
        },
        {
          fontFamily: 'IRANYekan',
          fontStyle: 'normal',
          fontWeight: 700,
          src: `url(${yekanBoldWoff2}) format('woff2')`,
          fallbacks: {
            src: [
              `url(${yekanBoldWoff})`,
              `url(${yekanBoldTtf}) format('truetype')`,
            ],
          },
        },
      ],
      html: {
        lineHeight: '1.5',
        WebkitTextSizeAdjust: '100%',
      },
      '*': {
        transition: 'opacity 1s cubic-bezier(0.4, 0, 0.2, 1)',
        fontFamily: "'IRANYekan', sans-serif, Arial",
        boxSizing: 'border-box',

        '&:after, &:before': {
          fontFamily: "'IRANYekan', sans-serif, Arial",
          boxSizing: 'border-box',
        },
        '&[type="checkbox"], &[type="radio"]': {
          boxSizing: 'border-box',
          padding: '0',
        },
        '&[type="number"]': {
          '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
            height: 'auto',
          },
        },
        '&[type="search"]': {
          WebkitAppearance: 'textfield',
          outlineOffset: -2,

          '&::-webkit-search-decoration': {
            WebkitAppearance: 'none',
          },
        },
        '&[hidden]': {
          display: 'none',
        },
        '&::-webkit-file-upload-button': {
          WebkitAppearance: 'button',
          font: 'inherit',
        },
      },
      body: {
        fontFamily: "'IRANYekan', sans-serif, Arial",
        lineHeight: '1.38',
        margin: 0,
      },
      '#react-view': {},
      'h1, h2, h3, h4, h5, h6': {
        margin: [[0, 0, spacing.margin]],
        lineHeight: '1.3',
        letterSpacing: 0,
        textTransform: 'none',
        color: colors.black,
        display: 'block',
        fontFamily: "'IRANYekan', sans-serif, Arial",
      },
      h1: {
        fontSize: typography.fontSize * 1.4,
      },
      h2: {
        fontSize: typography.fontSize * 1.2,
      },
      h3: {
        fontSize: typography.fontSize,
      },
      h4: {
        fontSize: typography.fontSize,
      },
      h5: {
        fontSize: typography.fontSize,
      },
      h6: {
        fontSize: typography.fontSize,
      },
      p: {
        display: 'block',
        margin: [[0, 0, spacing.margin]],
      },
      main: {
        display: 'block',
      },
      hr: {
        boxSizing: 'content-box',
        height: 0,
        overflow: 'visible',
      },
      pre: {
        fontSize: '1em',
      },
      a: {
        backgroundColor: 'transparent',
        textDecoration: 'none',
      },
      'b, strong': {
        fontWeight: 'bold',
      },
      small: {
        fontSize: '80%',
      },
      img: {
        borderStyle: 'none',
      },
      button: {
        WebkitAppearance: 'button',
      },
      input: {
        overflow: 'visible',
      },
      'button, input, optgroup, select, textarea': {
        fontFamily: 'inherit',
        fontSize: '100%',
        lineHeight: '1.15',
        margin: 0,
      },
      'button, input': {
        overflow: 'visible',
      },
      'button, select': {
        textTransform: 'none',
      },
      textarea: {
        overflow: 'auto',
      },
      'button, [type="button"], [type="reset"], [type="submit"]': {
        WebkitAppearance: 'button',

        '&::-moz-focus-inner': {
          borderStyle: 'none',
          padding: '0',
        },
        '&:-moz-focusring': {
          outline: [[1, 'dotted', 'ButtonText']],
        },
      },
      fieldset: {
        padding: '0.35em 0.75em 0.625em',
      },
      legend: {
        boxSizing: 'border-box',
        color: 'inherit',
        display: 'table',
        maxWidth: '100%',
        padding: '0',
        whiteSpace: 'normal',
      },
      progress: {
        verticalAlign: 'baseline',
      },
      details: {
        display: 'block',
      },
      summary: {
        display: 'list-item',
      },
      template: {
        display: 'none',
      },
    },
  });

export default globalStyles;

在我的组件的顶层，我注入了项目根组件：

import React from 'react';
import { Provider as ReduxProvider } from 'react-redux';
import { CssBaseline, withStyles } from '@material-ui/core';
import { Helmet } from 'react-helmet';
import SnackBarProvider from './SnackBar';
import globalStyles from '../utils/globalStyles';
import { generalHelmet } from '../utils/helmetConfig';

type AppProviderProps = {
  children: any,
  store: any,
};

const AppProvider = ({ children, store }: AppProviderProps) => (
  <>
    <Helmet {...generalHelmet} />
    <CssBaseline />
    <ReduxProvider store={store}>
      <SnackBarProvider>{children}</SnackBarProvider>
    </ReduxProvider>
  </>
);

export default withStyles(globalStyles)(AppProvider);

另外，在Webpack配置文件中，我编写了字体加载器，如下所示：

~~~

const nodeEnv = process.env.NODE_ENV || 'development';
const isDev = nodeEnv === 'development';
const exclude = [/node_modules/, /public/];
const name = isDev ? '[name].[ext]' : '[hash:5].[ext]';
const publicPath = '/assets/';

~~~

module.exports = {

  ~~~

  module: {
    rules: [

      ~~~

      {
        test: /\.(woff2?|ttf|eot|svg)$/,
        exclude,
        loader: 'url',
        options: { limit: 10240, name, publicPath },
      },

现在一切都很好。我希望我的配置对你有帮助。

你可以尝试下面提到的一些事情来检查你是否正确地编译了代码。
1.从您提到的导入字体的相关URL推断static文件夹和above file目录是同级。确保相关路径与每个root文件夹相同。
1.此外，如果您使用webpack捆绑代码，请确保包含ttf文件扩展名，并在compiling期间添加file-loader模块来处理它。
例如

{
  test: /\.(png|jpg|gif|svg|ttf|eot|woff)$/,
  loader: 'file-loader',
  query: {
    name: '[name].[ext]?[hash]'
  }
},

有几种可能性，但我建议尝试加载相同的字体通过您的index.css文件并检查结果，可能是您引用的位置不正确或字体不存在.
此外，可能需要一个文件加载器或插件来渲染与webpack read字体：https://chriscourses.com/blog/loading-fonts-webpack