Don't use @font-face in styled-components with GatsbyJS

I recently found out, that using @font-face in styled-components in a gatsbyjs-project causes the page to flicker and request the font on each render. Just move "@font-face" to a font.css file and import it in the layout component. No more flickering!

Demo: https://font-face-styled-components.netlify.app

Comments

[Ben Rogerson]

Styled components recommends font-display: fallback; to take care of the flicker.
styled-components.com/docs/faqs#ho...