@fontface自定义字体未在盖茨比加载

Question

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

//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')format('woff2')...一样将/添加到路径中。清除了caché，更改了浏览器，并尝试在手机上使用，但不起作用。此外，在我的浏览器检查器/网络中显示，刷新浏览器时可以找到字体：

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

很乐意得到帮助！

Answer 1

Gatsby中的自托管字体应位于静态文件夹中。所以我把文件放在路径中：

--> 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.

此外，还有使用web字体gatsby-pluggin的选项，这里对此进行了解释