font-display: block still results in FOUT

Question

I'm using Adobe Typekit for fonts on my website.

Using Adobe Font's online interface, I've set font-display to block because going from the local font to the Typekit one tends to be quite jarring. Regardless of the font-display setting, a flash of unstyled text (FOUT) always occurs. What am I doing wrong with my fonts?

It is important to mention my site is Gatsby-based and is using gatsby-plugin-web-font-loader.

Answer 1

Switching from gatsby-plugin-web-font-loader to gatsby-omni-font-loader and using the following configuration in gatsby-config.js solved the problem:

    {
      resolve: `gatsby-omni-font-loader`,
      options: {
        mode: `render-blocking`,
        preconnect: [`https://use.typekit.net`],
        web: [
          {
            name: `font1`,
            file: `https://use.typekit.net/${process.env.TYPEKIT_ID}.css`,
          },
          {
            name: `font2`,
            file: `https://use.typekit.net/${process.env.TYPEKIT_ID}.css`,
          },
        ],
      },
    }