css - Gatsby - 将 Google 字体添加到 Gatsby 站点

Question

我正在尝试在我的 Gatsby 站点中添加 Google 字体 (Mukta Malar)。
我看过很多关于将 Google 字体添加到 Gatsby 站点的文章，其中大部分似乎都使用了这个插件:gatsby-plugin-prefetch-google-fonts .
我已经在我的网站中使用了上述插件，方法是将其添加到 gatsby-config.js文件为:

plugins: [
    {
      resolve: `gatsby-plugin-prefetch-google-fonts`,
      options: {
        fonts: [
          {
            family: `Mukta Malar`
          },
        ],
      },
    }
  ]

并将字体系列添加到我的 css 文件中:

* {
  font-family: "Mukta Malar", sans-serif;
}

但谷歌字体不适用于该网站。我的代码中是否缺少隐藏的步骤？

Answer 1

这个插件似乎不再维护，它是 escalade 的一部分monorepo(抛出 404 错误)，从 1 年前开始在核心中最后一次提交。
我建议 gatsby-plugin-google-fonts 允许您display: swap您的字体而不影响您的性能。在你的情况下:

{
  resolve: `gatsby-plugin-google-fonts`,
  options: {
    fonts: [
      `mukta malar`
    ],
    display: 'swap'
  }
}