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.