盖茨比-添加谷歌字体到盖茨比网站

Question

我正试图在我的Gatsby网站中添加一个谷歌字体(Mukta Malar(。

我看过很多关于将谷歌字体添加到盖茨比网站的文章，其中大多数似乎都使用了这个插件：盖茨比插件预取谷歌字体。

我在我的网站上使用了上面的插件，将其添加到gatsby-config.js文件中作为：

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

并将字体家族添加到我的css文件中：

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

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

Answer 1

这个插件似乎不再维护，它是escalade monoreo的一部分(它抛出了一个404错误(，最后一次在核心中提交是在一年前。

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

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

Answer 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"

你可以引用css中的字体，就像你对任何谷歌字体所做的那样：

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

如果你只需要一些特定的重量或变体，你也可以只进口包装的一部分，如下所示：

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

• 这将只加载重量500；中等；重量

Answer 3

谷歌字体可在npmjs.org上获得，名称typeface-XXXXXX代表谷歌字体网站上字体家族的名称。

如果我想在我的网站上添加Poppins字体，我只需要在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