As I’ve been working more with Gatsby and styled-components, I’ve run across an issue with flashes of unstyled content showing on page load and refresh in an application deployed to Netlify. Squashing this required a bit of exploration.

Here are the two steps that eventually fixed my problem:

  1. Install the gatsby-plugin-styled-components styled-components babel-plugin-styled-components plugins and update the gatsby-config.js file (example below). I had only imported styled-components library, not knowing the other packages were needed.

This corrected the majority of issues I was having on page refresh. However, the unstyled font flicker was a little tricker to fix. After some experimentation I finally discovered that the gatsby-plugin-typograpy package did the trick.

  1. Install the gatsby-plugin-typography, react-typography and typography packages and update the gatsby-config.js (also below) in order to fix font issues.

This involves creating a src/utils folder, with a typography.js file. In order to use Google fonts, the typography file required some configurations.

Here’s mine:

Despite not setting the Bai Jamjuree font to either headerFontFamily or bodyFontFamily, I was able to use it elsewhere in my application.

Here’s my gatsby-config.js file:

Hope this helps!