Don't use @font-face in styled-components
This is an example how you shouldn't add a @font-face in a gatsby project. See source on github.
See how the page flickers if you click on a internal link to page 2.
Instead link/import your fonts like in this example.
The problem
If you click the internal link to page 2 you will see, that the page will flicker. This shouldn't happen in a gatsby page. This is because the font-face is reloaded with each navigation. You can see in the dev-tools of your browser how the 'FireCode'-fonts are requested each time you click the internal link.
Why is this happening?
If you define the font-face in styled-components for example with createGlobalStyle the fonts are reloaded on each render of react. See this Github issue.