Reactjs 将自定义字体应用于所有页面上的所有元素

我正在尝试为所有元素添加自定义字体，这样就不必在每个文本元素上用类名指定它

这就是我所拥有的：

包含字体的所有ttf文件的文件夹

my tailwind.config.js

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        'theme_white': '#a4a7b5',
        'theme_black': '#121212',
      },
      fontFamily: {
        'body': ["'Fira Sans Extra Condensed'"]
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

这是在我自己的css中，用于将其应用于身体内的所有元素（如果我没有错的话）

如果我在一个元素上指定类名

'font-body'

，它可以工作，但是当我不指定任何内容并且查看开发工具时，我可以看到应用的css

但是当我看到字体时，我知道它是错误的，我可以看到它，因为它是错误的

---

你知道怎么做吗？thx

尝试在css文件中导入字体，如下所示

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed&display=swap'); 

body: [ "'Fira Sans Extra Condensed'", 'sans-serif' ]

在顺风配置中，如下所示

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed&display=swap'); 

body: [ "'Fira Sans Extra Condensed'", 'sans-serif' ]

---

这个解决方案对我很有效

Hi，事实上我需要导入字体，但我确实在本地有它们，所以当在我的scss文件中添加这个时，@font-face{font-family:“Fira Sans Extra-Condensed”；font-weight:400；src:url（../../config//font/FiraSansExtraCondensed Regular.ttf）格式（“TrueType”）；}