Gatsby -向Gatsby站点添加Google字体

Question

我试图添加一个谷歌字体(Mukta )在我的盖茨比网站。

我看过很多关于将Google字体添加到Gatsby站点的文章，大多数文章似乎都使用了这个插件：gatsby插件预取-google-字体。

我在我的站点中使用了上述插件，将其添加到gatsby-config.js文件中如下：

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

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

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

但谷歌字体并不适用于该网站。在我的代码中是否遗漏了一个隐藏的步骤？

Answer 1

这个插件似乎不再被维护，它是埃斯卡莱德 monorepo (抛出一个404错误)的一部分，最后一次在内核中提交是在1年前。

我建议gatsby-plugin-google-fonts允许您在不影响性能的情况下对字体进行display: swap。就你而言：

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

Answer 2

Google字体可以在npmjs.org上找到，其名称typeface-XXXXXX表示Google字体网站上字体家族的名称。

如果我想在我的网站上添加Poppin字体，我只需要将它添加到package.json文件中：

yarn add typeface-poppins

然后，在我的站点中，我可以使用require(“字体-poppin”)来使用字体：

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"


require('typeface-poppins')

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <h1 style={{fontFamily: "Poppins"}}>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
      <Image />
    </div>
    <Link to="/page-2/">Go to page 2</Link> <br />
    <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
  </Layout>
)

export default IndexPage

Answer 3

正如其他提到的，包括你的盖茨比项目的字体，这将是更快！

盖茨比在他们的页面上写了一篇很棒的文章。

https://www.gatsbyjs.com/docs/how-to/styling/using-web-fonts/

下面是一个例子：

首先，使用npm或纱线安装字体：

yarn add @fontsource/mukta-malar // npm install 
@fontsource/mukta-malar

然后，在页面的布局文件中，导入字体如下：

import "@fontsource/mukta-malar"

您可以引用css中的字体，就像使用任何google字体一样：

font-family: 'Mukta Malar', sans-serif;

如果您只需要几个特定的权重或变体，也可以只导入包的以下部分：

import "@fontsource/mukta-malar/500.css" 

• 这将只加载重量500，即“中等”重量。