Css @fontface自定义字体未加载到Gatsby中

我的自定义字体无法使用，除非我在计算机中手动安装它

//my css file//

  @font-face {
  font-family:'PROGRESS PERSONAL USE';
  src: url('Progress.woff2')format('woff2'),
  url('Progress.woff')format('woff'),
  url('Progress.ttf') format('ttf');
} 

字体系列名称是正确的，因为我打开了文件字体以检查拼写是否正确，如果我安装字体并将其用作：

h1{
font-family: "PROGRESS PERSONAL USE"
}

我认为问题在于字体文件的路径，所以我将它们放在与CSS文件相同的文件夹和级别中。我还尝试在路径中添加一个

/

，比如前面的

url（'/Progress.woff2'）格式（'woff2'）…

。清除caché，更改浏览器，并尝试使用手机，但无法工作。 此外，在我的浏览器中，inspector/Network显示刷新浏览器时可以找到字体：

Request URL: http://localhost:8000/Progress.woff2
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:8000
Referrer Policy: strict-origin-when-cross-origin

---

我很乐意得到帮助

盖茨比中的自托管字体应位于静态文件夹中。 因此，我将文件放置在路径中：

--> static/fonts/Progress.woff2
-->static/fonts/Progress.woff
-->static/fonts/Progress.ttf

然后在我的src/（不在静态文件夹中）的globalStyles.css中，我将其放置如下：

@font-face {
  font-family:"PROGRESS PERSONAL USE";
  src: url('/fonts/Progress.woff2')format('woff2'),
  url('/fonts/Progress.woff')format('woff'),
  url('/fonts/Progress.ttf') format('ttf');
} 

如果没有全局css文件，可以为字体定义一个，并将其导入gatsby-browser.js

此外，还有使用盖茨比pluggin网站字体的选项，这一点已经解释过了