如何将本地/自定义字体添加到 react js 项目？

【问题标题】：How to add local / custom fonts to a react js project?如何将本地/自定义字体添加到 react js 项目？
【发布时间】：2020-07-28 13:15:18
【问题描述】：

我想在我的 react 项目中添加一些自定义/本地字体，谁能告诉我在 react 项目中使用它的方法吗？

下面我添加了一些我的代码，但它不起作用。

index.js

index.css

app.scss

谢谢

【问题讨论】：

stackoverflow.com/questions/41676054/…
@BasvanderLinden 我已经添加了我的代码的 ss。请看一看。

标签： html reactjs sass

【解决方案1】：

您在index.js 中导入了bold 字体，但在App.scss 中设置了book 字体。也尝试在body上设置font-family的时候加上!important：

html,
body {
  font-family: "CooperHewitt-Bold" !important;
}

使用@font-face：

/* index.css */ 
@font-face {
  font-family: "CooperHewitt-Bold";
  src: local("CooperHewitt-Bold"),
    url(./fonts/CooperHewitt-Bold.otf) format("opentype");
}

确保在index.js 中导入index.css：

import './index.css';
// ...

【讨论】：