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

Question

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

Answer 1

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

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

このような：

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

すでに手動でスタイリングを行っていたため、最終的にこのルートにたどり着きました。タイポグラフィを使用しようとすると、元に戻すのに時間がかかる多くの変更が加えられました。

Answer 2

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

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

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

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