GatsbyJS 在初始加载后未加载谷歌字体

Question

我将 Gatsby 从 v2.x.x 升级到 3，并且按照文档建议，升级了所有 gatsby 插件，包括 gatsby-plugin-styled-components 和 styled-components。

我知道我已经升级了主要版本，这意味着会有重大更改，但我必须升级 Gatsby，因为它在 M1 macbook 上出现故障。

现在的问题是，我的网站https://nikhilvijayan.com 现在不加载谷歌字体。例如：第一次加载工作正常（即谷歌字体加载正常），但随后点击导航中的任何链接（例如：https://nikhilvijayan.com/projects）加载页面时没有任何谷歌字​​体 - 但是，然后刷新页面将加载谷歌字体。

我最近没有做太多前端，想知道是否有人可以指出我调试这个问题的正确方向？这里是否发生了某种竞争条件？

幸运的是，当我在本地运行应用程序时也会发生这种情况，因此至少这是一致的行为。

Github 仓库：https://github.com/nkhil/portfolio

样式组件使用示例：https://github.com/nkhil/portfolio/blob/main/src/components/Hero.js#L47

Answer 1

这可能不是最好的解决方案，但您可以尝试在 Helmet 组件内的每个页面中导入 google 字体脚本。或者，我会下载字体并在全局 CSS 样式组件中提供它们。

 <Helmet>
    <meta charSet="utf-8" />
    <title>Nikhil Vijayan - Blog</title>
    <meta name="description" content="Blog posts written by 
    Nikhil 
    Vijayan" />
    <link rel="preconnect" href="https://fonts.googleapis.com"/>
    <link rel="preconnect" href="https://fonts.gstatic.com" 
    crossorigin="true"/>
    <link href="https://fonts.googleapis.com/css2? 
     family=Roboto:wght@300&display=swap" rel="stylesheet"/>
  </Helmet>

Answer 2

我认为您的字体在初始渲染时已正确加载，但由于@font-face 支持在styled-components 中非常奇怪（see GitHub issue）而在每个中都丢失了。有很多文章推荐使用font.css 文件。

我建议的解决方案是使用font.css 文件添加字体，您可以在其中定义@font-face，直接在Layout 组件中导入（因为它在您的模板之间共享），或使用Helmet 组件要加载字体，但只在Layout，您不需要在所有会导致性能下降的组件中使用它。

您甚至可以将这两种方法结合使用：

<Helmet>
  <link rel="stylesheet" type="text/css" href="/fonts.css" />
</Helmet>