48

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

4

11 回答 11

52

您还可以使用react-helmet，这在gatsby 教程中进行了讨论。

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

像这样：

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

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

于 2018-12-12T21:36:23.327 回答
45

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

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

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

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

于 2017-11-25T19:43:47.637 回答
10

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

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

于 2018-05-05T20:32:23.003 回答
6

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

添加 CDN href 并按照Material UI 文档React Helmet中的建议和他们 github 存储库中的官方 Material UI Gatsby 示例：

创建一个文件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>;

将相同的代码段添加到您的gatsby-ssr.js：

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

解释

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

链接到 Gatsby 浏览器 API

链接到 Gatsby SSR API

于 2020-01-03T00:37:24.147 回答
4

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

于 2019-02-08T13:09:37.617 回答
2

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

于 2019-06-27T18:31:33.600 回答
2

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

  • 首先下载字体文件：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

于 2018-07-05T19:04:34.723 回答
2

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

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

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

于 2017-11-26T22:31:39.430 回答
1

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

于 2020-08-31T15:26:49.920 回答
0

你可以使用官方的谷歌字体插件： https ://www.npmjs.com/package/gatsby-plugin-google-fonts

于 2018-01-22T23:21:12.933 回答
0

现有答案需要手动下载字体（在一种情况下）或嵌入<link>会减慢您的网站的速度，即使它是预取的（或者会优化以看起来很快，但可能会通过交换字体将用户暴露给 FOUC一旦下载）。

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

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

以下是我为 octue 的开源主页完整源代码执行此操作的方法，用于两种不同权重的不同字体。

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)
于 2022-02-23T16:57:35.797 回答