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

此插件似乎不再维护，它是 escalade 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 字体网站上字体系列的名称。

如果我想在我的网站上添加 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

如其他人所述，将字体包含在您的 Gatsby 项目中，这样会更快！

实际上，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"

你引用 css 中的字体就像你使用任何 google 字体一样：

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

如果您只需要一些特定的重量或变体，您也可以只导入包的一部分，如下所示：

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

这只会加载重量 500，也就是“中等”重量。

Gatsby - 向 Gatsby 站点添加 Google 字体

Gatsby - Adding Google fonts to Gatsby site

css

google-fonts

gatsby-plugin