将本地字体导入create-react-app项目

Question

我将使用create-react-app创建一个React应用程序，并选择不进行弹出式窗口。 目前，我正在尝试使用@font-face导入本地字体，但我没有成功。

这是我的当前文件夹结构：

/
+ public/
+ src/
-- index.js
-- App.js
-- App.css
++ assets/
+++ css/
---- general.css
+++ fonts/
---- CircularStd-Medium.woff

在 App.js 文件中，我正在导入 general.css 文件 (import './assets/css/general.css';)。

在 general.css 文件中，我按照以下描述设置了 @font-face：

@font-face {
  font-family: 'CircularStd-Medium';
  font-style: normal;
  src: local('CircularStd-Medium'), local('CircularStd-Medium'),
    url('../fonts/CircularStd-Medium.woff') format('woff'), 
}

我已经尝试了这个答案，但它没有起作用。代码编译通过，但只显示了一个简单的Times New Roman。

- Minoru

Answer 1

有趣的是，我正在导入同样的字体。当我把它放在公共文件夹中时，它不能正常工作。所以我把它移动到我的“路由器”区域（因为它也是相当全局的）。现在这个字体通过构建流程，并且能够正常工作。

require('./fonts/circular-std-master/css/circular-std.css');

请查看我的代码库;) https://github.com/maltenz/malte/tree/master/src/Router

- Malte Schulze-Boeing

---

哈哈，即使在2019年我也在导入同样的字体。 - Rajendran Nadar

该仓库页面不可用 @Malte Schulze-Boeing - Rahman Haroon

Answer 2

我将本地字体保存在/public/fonts中，并且在样式表（使用sass）中选择字体的url为/fonts/myfont。请注意开头的/。

对于在样式表中引用的图像（/img/myimage），也是同样的方式。

- j0nd0n7