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

Posted 2023-03-15

【中文标题】GatsbyJS 在初始加载后未加载谷歌字体

【英文标题】：GatsbyJS not loading google fonts after initial load

【发布时间】：2021-12-04 06:08:42

【问题描述】：

我将 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

【问题讨论】：

您能否至少分享一下您的 Google 字体实现？

对不起，我应该在帖子中包含这个！这是回购：github.com/nkhil/portfolio。这是我声明字体的示例：github.com/nkhil/portfolio/blob/main/src/components/Hero.js#L47。谢谢@FerranBuireu

【参考方案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>

【讨论】：

谢谢，我喜欢在本地提供字体而不是从谷歌字体加载它们的想法。也感谢您提供代码块！

我认为这是最好的选择，虽然更耗时，但您会获得更好的加载时间。不客气！

很抱歉这个答案最终没有帮助到我

【参考方案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>

【讨论】：

您的解决方案并不完全适合我，但仍然帮助了我。我最终使用gatsby-plugin-google-fonts 预加载我选择的字体，这似乎可以预见的工作。非常感谢您的评论，因为它帮助我指出了正确的方向。谢谢！对于阅读此问题并遇到相同问题的任何人，这是我最终使用的插件：gatsbyjs.com/plugins/gatsby-plugin-google-fonts 我也尝试过gatsby-plugin-preload-fonts，但没有用。

这也是另一个帮助我的 SO 问题：***.com/questions/47488440/…

是的，那是我的第二个选择，我总是使用自托管或其中一个加载插件，但看到您的代码源，我认为这不是您的选择。无论如何，我很高兴它有所帮助:)