如何添加谷歌字體到一個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