How do I add google fonts to a gatsby site

Question

Getting started with Gatsby - when I add a link tag to public/index.html with the google font it works in development mode. When I build the site the index.html gets reset. So I guess there is another proper way to add the font?

Answer 1

You can also use react-helmet, which is discussed in the gatsby tutorial.

Include a google fonts link element within the helmet component.

Like this:

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

I ended up going down this route because I had already done some styling manually, and when I tried using Typography it made a bunch of changes that would have taken me a while to undo.

Answer 2

Add the following to the top of src/layouts/index.css for example to import the 'Roboto' font by Google

@import url('https://fonts.googleapis.com/css?family=Roboto');  html {   font-family: 'Roboto', sans-serif; } 

This will then be handled by the gatsby build process and included in the final production version of the site.