Gatsby - Adding Google fonts to Gatsby site

非 Y 不嫁゛ 提交于 2020-08-20 06:17:27

问题


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

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.

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`
          },
        ],
      },
    }
  ]

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

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

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


回答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.

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'
  }
}


来源:https://stackoverflow.com/questions/63372710/gatsby-adding-google-fonts-to-gatsby-site

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!