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

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

Answer 1

正如其他提到的，在你的 Gatsby 项目中包含字体，这会更快！

实际上，盖茨比在他们的页面上写了一篇非常棒的文章。

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

这是一个例子：

首先你使用 npm 或 yarn 安装字体：

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

然后在页面的布局文件中，像这样导入字体：

import "@fontsource/mukta-malar"

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

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

如果您只需要一些特定的权重或变体，您也可以像这样只导入包的一部分：

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

• 这只会加载重量为 500 的“中等”重量。

Answer 2

Google 字体可在 npmjs.org 上使用，名称 typeface-XXXXXX 代表 Google 字体网站上字体系列的名称。

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

yarn add typeface-poppins

然后在我的网站中，我可以使用 require("typeface-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

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

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

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