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

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

问题描述:

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

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

导入“的Roboto”字体
@import url('https://fonts.googleapis.com/css?family=Roboto'); 

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

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

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

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

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

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