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

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')...之类的路径中添加一个/。清除缓存，更改浏览器，并在移动设备上尝试但无法正常工作。同样在我的浏览器中 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

很乐意为此获得帮助！

Answer 1

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

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

然后在我的 globalStyles.css 中，它位于我的 src/（不在静态文件夹中），我这样放置它：

@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 插件的选项here

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

@fontface custom font not loading in Gatsby

css

fonts

custom-font

gatsby