web-dev-qa-db-ja.com

Googleフォントをgatsbyサイトに追加するにはどうすればよいですか

Gatsbyの使用開始-Googleタグを使用してpublic/index.htmlにリンクタグを追加すると、開発モードで動作します。サイトを構築すると、index.htmlがリセットされます。だから、フォントを追加する別の適切な方法があると思いますか？

reactjsfontsgatsby
21
enginedave

たとえば、Googleの「Roboto」フォントをインポートするには、src/layouts/index.cssの先頭に次を追加します

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

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

これは、gatsbyビルドプロセスによって処理され、サイトの最終製品バージョンに含まれます。

25
enginedave

react-helmet を使用することもできます。これは gatsbyチュートリアル で説明されています。

ヘルメットコンポーネント内にGoogleフォントリンク要素を含めます。

このような：

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

すでに手動でスタイリングを行っていたため、このルートをたどりました。タイポグラフィを使用しようとすると、元に戻すのに時間がかかる変更がたくさんありました。

10
ptjetty

私は印象を受けていました Typefaces が道でした。追加の（ブロッキング）ネットワーク要求はありません。

NPMで書体-フォントを見つけることができる限り

6
skube

このプラグインでフォントをプリフェッチできます https://github.com/escaladesports/gatsby-plugin-prefetch-google-fonts このようにビルド段階で、プラグインはフォントを取得してローカルに保存するため、サーバーまたはCDNから提供できます。

2
Saša Šijak

Typography.jsをドキュメントで参照するように使用することもできます。

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

Typeography.js github page は、現在利用可能なすべてのフォントの組み合わせをリストしています。

2
Dade

Gatsby（react）Docsによれば、gatsby-plugin-offlineは、末尾が.cssでない場合、サーバーでGoogleフォントが要求されないようにすることができます。タイポグラフィを使用して、CDNから1つのフォントをインポートしましたが、後で here プラグインのデフォルトを上書きするgatsby-configを渡すこのオプションを見ました。

2
lorio

フォントを自分でホストすることもできます。ただ

この例では、src-folder shoudは次のようになります。

/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

1
natterstefan

使用できます 公式 Googleフォントプラグイン： https://www.npmjs.com/package/gatsby-plugin-google-fonts

0
eurotrash