如何将谷歌字体添加到 gatsby 网站答案

【问题标题】：How do I add google fonts to a gatsby site如何将谷歌字体添加到 gatsby 网站
【发布时间】：2018-05-09 08:44:12
【问题描述】：

开始使用 Gatsby - 当我使用 google 字体将链接标签添加到 public/index.html 时，它在开发模式下工作。当我构建站点时， index.html 会被重置。所以我想还有另一种添加字体的正确方法？

【问题讨论】：

【解决方案1】：

将以下内容添加到src/layouts/index.css 的顶部，例如通过 Google 导入“Roboto”字体

@import url('https://fonts.googleapis.com/css?family=Roboto');

html {
  font-family: 'Roboto', sans-serif;
}

这将由 gatsby 构建过程处理并包含在网站的最终生产版本中。

【讨论】：

我最终使用了这个。
即使这样可行，请记住字体下载和解析取决于 CSS 解析是否完成，而 @ptjetty 回答（在头部包含一个 - 在这种情况下使用头盔）是最佳选择，因为字体会立即开始下载。

【解决方案2】：

您也可以像他们在文档中引用的那样使用 Typography.js：

https://www.gatsbyjs.org/tutorial/part-two/#typographyjs

这里是 typeography.js github page，列出了他们当前可用的所有字体组合。

【讨论】：

【解决方案3】：

您可以使用 ~~official~~ google fonts 插件： https://www.npmjs.com/package/gatsby-plugin-google-fonts

【讨论】：

定义官方。
是的，它是一个社区插件：github.com/didierfranc/gatsby-plugin-google-fonts

【解决方案4】：

我的印象是 Typefaces 是要走的路。没有额外（阻塞）的网络请求。

只要你能在NPM上找到你的typeface-字体

【讨论】：

这种方法有什么缺点吗？这似乎是一个真正的“它只是工作”的解决方案，并且您没有额外的 http 请求......

【解决方案5】：

您也可以自己托管字体。只是

先下载字体文件：https://google-webfonts-helper.herokuapp.com/fonts/。
并将 css 添加到您的 styles.scss*：https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin。

在本例中，src 文件夹应如下所示：

/src/
     /styles/style.scss
     /fonts/roboto-v18-latin-regular.eot
     /fonts/roboto-v18-latin-regular.woff2
     /fonts/roboto-v18-latin-regular.woff
     /fonts/roboto-v18-latin-regular.ttf
     /fonts/roboto-v18-latin-regular.svg

* 你必须有一个喜欢使用 scss 的插件：https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sass

【讨论】：

我喜欢这种方法，只是我将它与文件系统插件一起使用以允许访问字体文件，只需确定指向文件的 scss 上的路径将如何。 “../fonts/font.ttf”非常重要。

【解决方案6】：

您也可以使用react-helmet，这在gatsby tutorial 中进行了讨论。

在头盔组件中包含一个 google 字体链接元素。

像这样：

<Helmet>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"/>
</Helmet>

我最终选择了这条路线，因为我已经手动完成了一些样式设置，当我尝试使用 Typography 时，它进行了一系列更改，我需要一段时间才能撤消。

【讨论】：

我认为这提供了最好的解决方案，特别是如果 font-face 是 css 框架的依赖项。
如果您的项目中已经有 Helmet，那么这是要走的路。

【解决方案7】：

您可以使用此插件https://github.com/escaladesports/gatsby-plugin-prefetch-google-fonts 预取字体，这样在构建阶段，插件将获取您的字体并将其存储在本地，以便您可以从您的服务器或 CDN 提供它们。

【讨论】：

【解决方案8】：

根据 Gatsby(react) Docs，如果 Google 字体不以 .css 结尾，gatsby-plugin-offline 可能会阻止在服务器上请求 Google 字体。我使用 Typography 并最终从 CDN 导入了一种字体，但后来看到 here 这个选项传入 gatsby-config 以覆盖插件的默认值。

【讨论】：

【解决方案9】：

如果您将 Material UI 与 Gatsby 结合使用，这是最佳方式：

按照Material UI documentation 中的建议将CDN href 与React Helmet 结合起来，并从他们的github 存储库中添加官方材料UI Gatsby example：

创建一个文件RootLayout.jsx（或任意命名）：

import React from "react";
import { Helmet } from "react-helmet";
import CssBaseline from "@material-ui/core/CssBaseline";

export default function RootLayout({ children }) {
  return (
    <>
      <Helmet>
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
        />
        <link rel="stylesheet"
              href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600&display=swap" />
      </Helmet>
      {children}
    </>
  );
}

将此代码添加到您的gatsby-browser.js：

export const wrapRootElement = ({ element }) => <RootLayout>{element}</RootLayout>;

将相同的代码 sn-p 添加到您的 gatsby-ssr.js:

export const wrapRootElement = ({ element }) => <RootLayout>{element}</RootLayout>;

说明

布局中的代码使用 Gatsby 浏览器和 SSR API 包裹在您的 React 应用程序中。这样字体就可以在整个 Gatsby 应用程序中使用。

Link to Gatsby Browser API

Link to Gatsby SSR API

【讨论】：

【解决方案10】：

您现在只需 npm 安装 google 字体预取包并将您喜欢的任何字体添加到您的 gatsby-config 文件中。然后像往常一样在 css 文件中使用字体。在此处查看 gatsby 文档：https://www.gatsbyjs.com/plugins/gatsby-plugin-prefetch-google-fonts/

【讨论】：

【解决方案11】：

现有答案需要手动下载字体（在一种情况下）或嵌入 <link>，这会减慢您的网站速度，即使它是预取的（或者会优化以快速显示，但可能会向用户展示FOUC 通过在下载后交换字体）。

在 2022 年另一种方法是使用 fontsource，在这种情况下，gatsby 仅在构建时下载并合并所需的 CSS，而不是在加载时。

请注意，在一些灯塔报告中（例如，对于 gatsby 云上的分支预览），与使用预加载标签相比，这似乎会减慢网站加载速度，但是在涉及 CDN 的生产环境中，CSS 是自服务的非常快。

以下是我为 octue 的开源主页full source code here 为两种不同粗细的字体所做的。

yarn add @fontsource/open-sans
yarn add @fontsource/work-sans

/*
 * Preload our font CSS at build-time
 * You can do this
 *  - in a theme file (e.g. if using material-ui), or
 *  - in gatsby-browser.js, or
 *  - where the fonts are first used
 */
import '@fontsource/open-sans/400.css'
import '@fontsource/work-sans/300.css'
import '@fontsource/work-sans/400.css'
import '@fontsource/work-sans/500.css'
import '@fontsource/work-sans/500-italic.css'

// The following is not necessary - for example using with MUI only
// If you're using Material-UI or similar, you'll be able to use the font directly
import { createMuiTheme } from '@material-ui/core'

const themeOptions = {
  typography: {
    h1: {
      fontFamily: "'Work Sans', sans-serif",
      fontStyle: 'normal',
      fontSize: '5rem', // Converted from '80px',
      fontWeight: 400,
      lineHeight: '5.5rem', // Converted from '88px',
    },
    body1: {
      fontFamily: "'Open Sans', sans-serif",
      fontWeight: 300, // TODO consider whether to raise to 400 for better aliasing and visibility
      fontSize: '1.125rem', // Converted from 18px
      lineHeight: '1.625rem', // Converted from 26px
      letterSpacing: '0.01rem',
    },
  },
}

  export const theme = createMuiTheme(themeOptions)

【讨论】：