导入本地字体以创建react应用程序项目

Question

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

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

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

在应用程序.js，我正在导入常规.css文件（导入“./资产/css/常规.css”;）。

在< code>general.css文件中，我设置了< code>@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。

Answer 1

我将我的本地字体保存在/public/fonts中，在样式表（我使用sass）中，选择字体的url是/fonts/myfontNote the/at the begin。

对于样式表(/img/myimage)中引用的图像也是如此

Answer 2

有趣的是，我正在导入相同的字体。当我将它放在公用文件夹中时，它不起作用。所以我将它移动到我的“路由器”区域（因为它也是非常全局的）。字体现在通过构建管道并工作

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

查看我的回购代码；）

https://github.com/maltenz/malte/tree/master/src/Router