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

Question

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

Answer 1

これは、その後ギャツビービルドプロセスによって処理され、サイトの最終製品版に含まれることになるGoogleの

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

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

によって「Roboto」フォントをインポートするには、例えばsrc/layouts/index.cssの先頭に次の行を追加します。 。彼らはドキュメントで参照するように

Answer 2

またtypography.jsを使用することができます。ここでは

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

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

Answer 3

公式google fontsプラグインを使用できます。 https://www.npmjs.com/package/gatsby-plugin-google-fonts