blocks|key|4439180|text|您还可以使用gatsby+tutorial中讨论的react-helmet。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4439181|在头盔组件中包含google字体链接元素。|4439182|如下所示：|4439183|<Helmet>
++<link+href="https://fonts.googleapis.com/css?family=Open%2BSans"+rel="stylesheet"/>
</Helmet>|code-block|syntax|javascript|4439184|我最终走上了这条路，因为我已经手动做了一些样式，当我尝试使用排版时，它做了一大堆更改，我需要一段时间才能撤销。|4439185|entityMap|0|LINK|mutability|MUTABLE|url|https://www.gatsbyjs.org/tutorial/part-eight/#add-page-metadata|1|https://github.com/nfl/react-helmet^0|6|F|0|P|C|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]|$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|6|7|15|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|16|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]]]

You can also use <a href="https://github.com/nfl/react-helmet" rel="noreferrer">react-helmet</a>, which is discussed in the <a href="https://www.gatsbyjs.org/tutorial/part-eight/#add-page-metadata" rel="noreferrer">gatsby tutorial</a>. 

Include a google fonts link element within the helmet component.

Like this:

<pre><code>&lt;Helmet&gt;
 &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"/&gt;
&lt;/Helmet&gt;
</code></pre>

I ended up going down this route because I had already done some styling manually, and when I tried using Typography it made a bunch of changes that would have taken me a while to undo.

blocks|key|1783943|text|例如，将以下内容添加到src/layouts/index.css的顶部，以通过谷歌导入'Roboto‘字体|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1783944|@import+url('https://fonts.googleapis.com/css?family=Roboto');

html+{
++font-family:+'Roboto',+sans-serif;
}|code-block|syntax|javascript|1783945|然后，这将由gatsby构建过程处理，并包含在网站的最终生产版本中。|1783946|entityMap^0|B|L|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

Add the following to the top of <code>src/layouts/index.css</code> for example to import the 'Roboto' font by Google

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

html {
 font-family: 'Roboto', sans-serif;
}
</code></pre>

This will then be handled by the gatsby build process and included in the final production version of the site.

blocks|key|2326355|text|我的印象是Typefaces是最好的选择。没有额外的(阻塞)网络请求。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2326356|只要你能在NPM上找到你的字体|2326357|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/KyleAMathews/typefaces^0|5|9|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

I was under the impression <a href="https://github.com/KyleAMathews/typefaces" rel="noreferrer">Typefaces</a> was the way to go. No extra (blocking) network requests.

As long as you can find your typeface- font on NPM

blocks|key|5855321|text|如果您将Material+UI与Gatsby结合使用，以下是最佳方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5855322|按照Material+UI+documentation和github存储库的官方材料UI+Gatsby+example中的建议，将CDN+href与React+Helmet结合添加：|offset|length|style|CODE|5855323|创建一个文件RootLayout.jsx+(或按您的喜好命名)：|5855324|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}
++++</>
++);
}|code-block|syntax|javascript|5855325|将此代码添加到您的gatsby-browser.js|5855326|export+const+wrapRootElement+=+({+element+})+=>+<RootLayout>{element}</RootLayout>;|5855327|将相同的代码片段添加到gatsby-ssr.js中|5855328|export+const+wrapRootElement+=+({+element+})+=>+<RootLayout>{element}</RootLayout>;|5855329|解释|5855330|布局中的代码使用Gatsby浏览器和SSR+API封装在您的React应用程序中。这样，字体就可以在整个Gatsby应用程序中使用。|5855331|Link+to+Gatsby+Browser+API|5855332|Link+to+Gatsby+SSR+API|5855333|entityMap|0|LINK|mutability|MUTABLE|url|https://material-ui.com/components/typography/#roboto-font-cdn|1|https://github.com/mui-org/material-ui/tree/master/examples/gatsby|2|https://www.gatsbyjs.org/docs/browser-apis/#wrapRootElement|3|https://www.gatsbyjs.org/docs/ssr-apis/#wrapRootElement^0|0|22|C|2|P|0|19|E|1|0|6|E|0|0|9|H|0|0|B|D|0|0|0|0|0|Q|2|0|0|M|3|0^^$0|@$1|2|3|4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1J|8|@$D|1K|E|1L|F|G]]|9|@$D|1M|E|1N|1|1O]|$D|1P|E|1Q|1|1R]]|A|$]]|$1|H|3|I|5|6|7|1S|8|@$D|1T|E|1U|F|G]]|9|@]|A|$]]|$1|J|3|K|5|L|7|1V|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1W|8|@$D|1X|E|1Y|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1Z|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|20|8|@$D|21|E|22|F|G]]|9|@]|A|$]]|$1|U|3|V|5|L|7|23|8|@]|9|@]|A|$M|N]]|$1|W|3|X|5|6|7|24|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|25|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|26|8|@]|9|@$D|27|E|28|1|29]]|A|$]]|$1|12|3|13|5|6|7|2A|8|@]|9|@$D|2B|E|2C|1|2D]]|A|$]]|$1|14|3|-4|5|6|7|2E|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|1B]]|1C|$5|17|18|19|A|$1A|1D]]|1E|$5|17|18|19|A|$1A|1F]]|1G|$5|17|18|19|A|$1A|1H]]]]

If you are using Material UI in combination with Gatsby, here is the optimal way:

Add the CDN href in combination with <code>React Helmet</code> as suggested in the <a href="https://material-ui.com/components/typography/#roboto-font-cdn" rel="noreferrer">Material UI documentation</a> and the official Material UI <a href="https://github.com/mui-org/material-ui/tree/master/examples/gatsby" rel="noreferrer">Gatsby example</a> from their github repository:

Create a file <code>RootLayout.jsx</code> (or name it however you want):

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

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

Add this code to your <code>gatsby-browser.js</code>:

<pre><code>export const wrapRootElement = ({ element }) =&gt; &lt;RootLayout&gt;{element}&lt;/RootLayout&gt;;
</code></pre>

Add the same code snippet to your <code>gatsby-ssr.js</code>:

<pre><code>export const wrapRootElement = ({ element }) =&gt; &lt;RootLayout&gt;{element}&lt;/RootLayout&gt;;
</code></pre>

<h2>Explanation</h2>

The code in the layout is wrapped around your React app using the Gatsby Browser and SSR API. This way the font is available throughout your whole Gatsby app.

<a href="https://www.gatsbyjs.org/docs/browser-apis/#wrapRootElement" rel="noreferrer">Link to Gatsby Browser API</a>

<a href="https://www.gatsbyjs.org/docs/ssr-apis/#wrapRootElement" rel="noreferrer">Link to Gatsby SSR API</a>

blocks|key|5855263|text|你可以在构建阶段用这个插件https://github.com/escaladesports/gatsby-plugin-prefetch-google-fonts预取字体，插件将获取你的字体并将其存储在本地，这样你就可以从你的服务器或CDN上为它们提供服务。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5855264|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/escaladesports/gatsby-plugin-prefetch-google-fonts^0|D|1X|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

You can prefetch fonts with this plugin <a href="https://github.com/escaladesports/gatsby-plugin-prefetch-google-fonts" rel="nofollow noreferrer">https://github.com/escaladesports/gatsby-plugin-prefetch-google-fonts</a> This way in the build phase, the plugin will fetch your fonts and store it locally so you can serve them from your server or CDN.

blocks|key|2326324|text|您还可以像他们在文档中引用的那样使用typography.js：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2326325|https://www.gatsbyjs.org/tutorial/part-two/#typographyjs|offset|length|2326326|下面是typeography.js+github+page，其中列出了他们目前可用的所有字体组合。|2326327|entityMap|0|LINK|mutability|MUTABLE|url|1|http://kyleamathews.github.io/typography.js/^0|0|0|1K|0|0|I|B|1|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@$D|S|E|T|1|U]]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|H|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]|O|$5|K|L|M|A|$N|P]]]]

You can also use typography.js like they reference in the docs:

<a href="https://www.gatsbyjs.org/tutorial/part-two/#typographyjs" rel="nofollow noreferrer">https://www.gatsbyjs.org/tutorial/part-two/#typographyjs</a>

Here is the typeography.js <a href="http://kyleamathews.github.io/typography.js/" rel="nofollow noreferrer">github page</a> that lists all the font combination they currently have available.

blocks|key|4439157|text|您也可以自己托管字体。只是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4439158|css首先下载字体文件：https://google-webfonts-helper.herokuapp.com/fonts/.|offset|length|4439159|and将css添加到您的styles.scss*：https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin.|unordered-list-item|4439160|4439161|在此示例中，src-folder应如下所示：|4439162|/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|code-block|syntax|javascript|4439163|*你必须有像这样的插件才能使用scss：https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sass|4439164|entityMap|0|LINK|mutability|MUTABLE|url|https://google-webfonts-helper.herokuapp.com/fonts/|1|https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin|2|https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sass^0|0|C|1F|0|0|P|1Z|1|0|0|0|0|K|22|2|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@$D|16|E|17|1|18]]|A|$]]|$1|F|3|G|5|H|7|19|8|@]|9|@$D|1A|E|1B|1|1C]]|A|$]]|$1|I|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1E|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1F|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1G|8|@]|9|@$D|1H|E|1I|1|1J]]|A|$]]|$1|S|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]|12|$5|V|W|X|A|$Y|13]]]]

You can also host the fonts by yourself. Just

<ul>
<li>Download the font files first: <a href="https://google-webfonts-helper.herokuapp.com/fonts/" rel="nofollow noreferrer">https://google-webfonts-helper.herokuapp.com/fonts/</a>.</li>
<li>and add the css to your styles.scss*: <a href="https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin" rel="nofollow noreferrer">https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin</a>.</li>
</ul>

In this example the src-folder shoud look like:

<pre><code>/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
</code></pre>

* you have to have a plugin like to use scss: <a href="https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sass" rel="nofollow noreferrer">https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sass</a>

blocks|key|1784018|text|根据Gatsby(react)文档，如果谷歌字体没有以.css结尾，那么gatsby-plugin-offline可能会阻止在服务器上请求谷歌字体。我使用了排版，并最终从CDN导入了一种字体，但后来看到here传入了这个选项来覆盖插件的默认设置。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1784019|entityMap|0|LINK|mutability|MUTABLE|url|https://www.gatsbyjs.org/packages/gatsby-plugin-offline/^0|2T|4|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

According to Gatsby(react) Docs, gatsby-plugin-offline may prevent Google fonts from being requested on the server if they do not end in .css. I used Typography and ended up importing one font from CDN but later saw <a href="https://www.gatsbyjs.org/packages/gatsby-plugin-offline/" rel="nofollow noreferrer">here</a> this option to pass in gatsby-config to override the plugin's default.

blocks|key|4439287|text|现在，您只需安装npm，安装google+font+prefetch包，并将您喜欢的任何字体添加到gatsby-config文件中。然后像往常一样在css文件中使用字体。请在此处查看盖茨比文档：https://www.gatsbyjs.com/plugins/gatsby-plugin-prefetch-google-fonts/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4439288|entityMap|0|LINK|mutability|MUTABLE|url|https://www.gatsbyjs.com/plugins/gatsby-plugin-prefetch-google-fonts/^0|2P|1X|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

You can now just npm install the google font prefetch package and add any fonts you like to your gatsby-config file. Then use the font as you normally would in your css file. Checkout the gatsby docs here: <a href="https://www.gatsbyjs.com/plugins/gatsby-plugin-prefetch-google-fonts/" rel="nofollow noreferrer">https://www.gatsbyjs.com/plugins/gatsby-plugin-prefetch-google-fonts/</a>

blocks|key|5855404|text|现有的答案要么需要手动下载字体(在一种情况下)，要么需要嵌入一个<link>，这会减慢你的网站速度，即使它是预取的(或者会优化为快速显示，但一旦下载就会通过交换字体来潜在地将用户暴露在FOUC中)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5855405|gatsby在2022年另一种方法是使用fontsource，在这种情况下，gatsby只在构建时下载并合并所需的，而不是在加载时。|BOLD|5855406|请注意，在一些灯塔报告中(例如，对于gatsby云上的分支预览)，与使用预加载标签相比，这可能会减慢站点负载，但在涉及CDN的生产中，自助式CSS非常快。|5855407|下面是我为octue的开源主页full+source+code+here所做的工作，它支持两种不同粗细的字体。|5855408|yarn+add+@fontsource/open-sans
yarn+add+@fontsource/work-sans|code-block|syntax|javascript|5855409|/*
+*+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)|5855410|entityMap|0|LINK|mutability|MUTABLE|url|https://fontsource.org/|1|https://github.com/octue/planex-site^0|W|6|0|1L|9|K|A|0|0|0|25|0|0|1J|F|L|1|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@$9|17|A|18|B|H]]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|I|3|J|5|6|7|1C|8|@$9|1D|A|1E|B|H]]|D|@]|E|$]]|$1|K|3|L|5|6|7|1F|8|@$9|1G|A|1H|B|H]]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|M|3|N|5|O|7|1L|8|@]|D|@]|E|$P|Q]]|$1|R|3|S|5|O|7|1M|8|@]|D|@]|E|$P|Q]]|$1|T|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]|11|$5|W|X|Y|E|$Z|12]]]]

Existing answers require either a manual download of the font (in one case) or embed a <code>&lt;link&gt;</code> which will slow down your site, even if it's prefetched (or will optimise to appear quick, but potentially expose the user to a FOUC by swapping in the fonts once downloaded).
In 2022 an alternative way of doing this is to use <a href="https://fontsource.org/" rel="nofollow noreferrer">fontsource</a>, in which case gatsby downloads and incorporates only the required CSS at build-time, not at load time.
Note that in some lighthouse reports (e.g. for branch previews on gatsby cloud) this can appear to slow down site load as compared to a with a preload tag, however in production where a CDN is involved, self-serving that CSS is extremely quick.
Here's how I did it for octue's open-source homepage <a href="https://github.com/octue/planex-site" rel="nofollow noreferrer">full source code here</a> for two different fonts of varying weights.
<pre><code>yarn add @fontsource/open-sans
yarn add @fontsource/work-sans
</code></pre>
<pre class="lang-js prettyprint-override"><code>/*
 * 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: &quot;'Work Sans', sans-serif&quot;,
 fontStyle: 'normal',
 fontSize: '5rem', // Converted from '80px',
 fontWeight: 400,
 lineHeight: '5.5rem', // Converted from '88px',
 },
 body1: {
 fontFamily: &quot;'Open Sans', sans-serif&quot;,
 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)
</code></pre>

Getting started with Gatsby - when I add a link tag to public/index.html with the google font it works in development mode. When I build the site the index.html gets reset. So I guess there is another proper way to add the font?

How do I add google fonts to a gatsby site

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

问如何将google字体添加到gatsby站点
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将google字体添加到gatsby站点EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将google字体添加到gatsby站点
EN