如何添加谷歌字体到一个gatsby网站

Question

Gatsby入门 - 当我添加一个链接标签public/index.html谷歌字体它在开发模式下工作。当我建立网站时，index.html被重置。所以我想还有另一种正确的方法来添加字体？

Answer 1

下加入的src/layouts/index.css例如通过谷歌

导入“的Roboto”字体

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

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

这将随后被盖茨比生成过程进行处理，并列入该网站的最终量产版上。

Answer 2

您还可以使用typography.js就像他们在文档引用：

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

下面是列出了所有的字体组合，他们目前有可用的typeography.js github page。

Answer 3

您可以使用官方谷歌字体插件： https://www.npmjs.com/package/gatsby-plugin-google-fonts