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?
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.
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.