DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Don't use @font-face in styled-components with GatsbyJS
Philip SchΓΆnholzer
Philip SchΓΆnholzer

Posted on

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

Top comments (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...

🌚 Life is too short to browse without dark mode