DEV Community

loading...
Cover image for Don't use @font-face in styled-components with GatsbyJS

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

Philip Schönholzer
・1 min read

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

Discussion (1)

Collapse
benrogerson profile image
Ben Rogerson

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