How to link/import fonts with styled-components
This is an example how you should add a @font-face in a gatsby project with styled-components. See source on github.
See how the page does not flicker if you click on a internal link to page 2.
If you want to see an example how not to do it, take a look at this project.
The solution
Even if you use styled-components don't define @font-face with it. Just import a font.css in your Gatsby-layout instead. Importing a css-file with the @font-face definitions is easy and removes the flickering that you get from defining the @font-face inside of a styled-component.
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.
With import '../font.css' this wont happen.