Gatsby-将Google字体添加到Gatsby网站 [英] Gatsby - Adding Google fonts to Gatsby site

问题描述

我正在尝试在我的Gatsby网站中添加Google字体（Mukta Malar）。

I'm trying to add a Google Font (Mukta Malar) in my Gatsby site.

我看过很多关于将Google字体添加到Gatsby网站中的文章。似乎使用了此插件： gatsby-plugin-prefetch-google-fonts 。

I've seen many articles on adding Google fonts to a Gatsby site and most of them seem to use this plugin: gatsby-plugin-prefetch-google-fonts.

我在网站中使用了上述插件，方法是将其添加到 gatsby-config.js 文件中如：

I've used the above plugin in my site by adding it in the gatsby-config.js file as:

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

，并将字体家族也添加到我的css文件中： / p>

and added the font family to my css file as well:

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

但是Google字体不适用于该网站。

But the Google font is not applying to the site. Is there a hidden step that I'm missing in my code?

推荐答案

此插件似乎已不再维护，它是其中的一部分 escalade monorepo（会引发 404 错误），最后一次提交是在1年前。

This plugin seems to be no longer maintained and it's part of escalade monorepo (which throws a 404 error), last commit in the core from 1 year ago.

我建议 gatsby-plugin-google-fonts ，使您可以显示：交换字体而不会影响性能。在您的情况下：

I would suggest gatsby-plugin-google-fonts that allows you to display: swap your fonts without affecting your performance. In your case:

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

这篇关于Gatsby-将Google字体添加到Gatsby网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！