如何将谷歌字体添加到盖茨比网站

Question

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

Answer 1

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

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

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

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

Answer 2

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

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

像这样：

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

我最终选择了这条路线，因为我已经手动进行了一些样式设置，当我尝试使用“排版”时，做了很多更改，这些更改可能需要一段时间才能撤消。

Answer 3

我对Typefaces是必去之路。没有额外的（阻止）网络请求。

只要您可以在NPM上找到字体

Answer 4

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

添加 CDN href 结合材料 UI 文档React Helmet中的建议和来自其 github 存储库的官方材料 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