The latest articles on DEV Community by Philip Schönholzer (@philschonholzer). https://dev.to/philschonholzer https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F262950%2F052a3a2d-da83-414e-b83a-3cecf3c3a433.png https://dev.to/philschonholzer en Philip Schönholzer Thu, 21 May 2020 17:46:49 +0000 https://dev.to/philschonholzer/don-t-use-font-face-in-styled-components-with-gatsbyjs-1hkg https://dev.to/philschonholzer/don-t-use-font-face-in-styled-components-with-gatsbyjs-1hkg <p>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! </p> <p>Demo: <a href="https://font-face-styled-components.netlify.app">https://font-face-styled-components.netlify.app</a></p> gatsby styledcomponents font