使用Gatsby和Netlify的在线版本存在字体问题

Question

我正在使用gatsby，我通过netlify进行部署，但是Google字体有问题。我正在使用Raleway（H1）和Open Sans（身体）。我尝试在css中导入字体，并且它在本地工作，而不是在netlify上使用在线版本，我尝试在本地使用“ gatsby-plugin-google-font”，但不能在netlify上使用。我不知道问题出在哪里。您可以在这里查看网站：https://syter.fr有任何想法吗 ？谢谢：）

Answer 1

最好的猜测，而不会看到您的样式代码-它看起来像CSS特异性错误，而不是Gatsby或Netlify所特有的。您可以在devtools的“网络”选项卡中验证字体是否已正确加载。并且如果您选择了一种呈现方式不正确的文本元素，则会看到正确的字体（例如“ Open Sans”）被一种或多种其他字体掩盖了。在devtools中禁用后，您将获得要使用的字体：

进入您的index.css文件，我看到了：

• font-family在body块中多次声明； georgia,serif的优先级高于Open Sans的优先级。

• 类似地，您对标头元素具有竞争特异性的规则；例如，

h1,h2 {
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
  // ...
}
// [futher down]
.landing h1 {
  font-family: Raleway,sans-serif
}

任何想法这些CSS规则来自哪里？我将从那里开始。

---

关于在本地运行与在Netlify上看到不同的结果的原因-请记住，从运行gatsby develop看到的结果

not

等同于将要部署的结果，因为盖茨比在“开发”中做了一些努力模式以启用热重装和其他功能，并在“构建”模式下进行大量优化以提高生产性能... 99％的时间结果是相同的，但有时我会遇到一些极端情况，它们会出现差异。您是否尝试过在本地运行gatsby build，然后测试该步骤的静态输出（使用gatsby serve还是仅将cd放入公共目录并启动指向index.html的HTTP服务器）？我敢打赌，您将能够以这种方式在本地复制在Netlify中看到的内容，这可能有助于调试。部分，c'esttrèsbienconçu👍

希望这会有所帮助！