6

我正在尝试在我的 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;
}

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

4

3 回答 3

5

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

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

{
  resolve: `gatsby-plugin-google-fonts`,
  options: {
    fonts: [
      `mukta malar`
    ],
    display: 'swap'
  }
}
于 2020-08-12T09:12:55.550 回答
3

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
于 2020-09-14T11:13:33.063 回答
2

正如其他提到的，在你的 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 又名“中等”重量。
于 2021-03-25T13:45:35.033 回答