Font flicker on refresh when using fontsource

[hayatae]

Description

When using custom fonts via a fontsource (https://github.com/fontsource/fontsource) package such as Roboto (https://www.npmjs.com/package/fontsource-roboto) as recommended by the tutorial page on using web fonts (https://www.gatsbyjs.com/docs/using-web-fonts/), there is a brief flicker on render where a default font is shown before the custom font is displayed. This is most visible in the current version of Google Chrome browser, as well as safari (both iOS and desktop). Firefox seems to default to not displaying the page at all until the font is loaded.

I'd expect this flicker to occur on initial page load if the font has to be fetched, but it shouldn't occur on a subsequent re-visit or refresh. This happens in both development mode and in production build/serve mode.

Steps to reproduce

Demo project: https://github.com/hayatae/gatsby-font-flicker

Refresh the page in either develop or serve mode in Chrome or Safari. Notice the font flicker in the H1 tags.

Expected result

No font flicker on refresh

Actual result

Font flickering on refresh

Environment

System:
OS: macOS 10.15.7
CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
npm: 6.14.8 - ~/.nvm/versions/node/v14.15.1/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 87.0.4280.67
Firefox: 83.0
Safari: 14.0.1
npmPackages:
gatsby: ^2.26.1 => 2.26.1
gatsby-image: ^2.5.0 => 2.5.0
gatsby-plugin-manifest: ^2.6.1 => 2.6.1
gatsby-plugin-offline: ^3.4.0 => 3.4.0
gatsby-plugin-react-helmet: ^3.4.0 => 3.4.0
gatsby-plugin-sharp: ^2.8.0 => 2.8.0
gatsby-source-filesystem: ^2.5.0 => 2.5.0
gatsby-transformer-sharp: ^2.6.0 => 2.6.0

[KyleAMathews]

The default CSS fontsource uses to control this behavior isfont-display: swap — https://unpkg.com/[email protected]/index.css

You can override that in CSS to use different values instead of swap e.g. block is probably what you want as that will just show nothing until the font loads https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

[hayatae]

Hmm, yeah using font-display: fallback looks like a good option that works well. However, there does not appear to be any way to override just the font-display property? Looks like I have to copy/paste the css from font-source, edit the font-display value to my preference, and use that css instead along with copying all of the font files to a new location that gatsby can serve.

I'm also surprised that there's any lag/swap time at all after the initial load. Shouldn't the browser immediately recognize that it already has the font file cached and not have to do any swapping on a page refresh? Is this maybe just a weird caching behavior from gatsby dev/serve? I haven't tried it with other file servers yet.

[MMMalik]

I am experiencing the same issue on Windows 10 / Chrome 87. I am using lato font within a setup done according to official docs. Just like @hayatae, I was also surprised that glitch associated with font-display: swap was appearing even after initial load.

I'm not sure why this is happenning but I suppose that 304 requests for .woff file are triggering the swap behavior. Might this be an issue with Chrome? What is interesting, the issue does not appear on Windows 10 / Firefox 84.

Since I wanted to self-host fonts anyway, I solved this by setting Cache-Control: public, max-age=31536000 header on server responses for fonts in order to instruct browser to get fonts from cache. Since I deploy to Netlify, I used gatsby-plugin-netlify plugin:

{
  resolve: "gatsby-plugin-netlify",
  options: {
    headers: {
      "/*.(woff|woff2)": ["Cache-Control: public, max-age=31536000"],
    },
  },
},

Now the glitch is gone.

While working on this I noticed that some font files were inlined by url-loader, other fallback to file-loader. I don't see much benefit in using url-loader to load fonts if I'm using font-display: swap anyway. Therefore I added following snippet to my gatsby-node.js:

exports.onCreateWebpackConfig = ({ actions, rules, loaders, getConfig }) => {
  const config = getConfig();
  const fonts = rules.fonts();
  fonts.use = [loaders.file()];
  config.module.rules = [
    ...config.module.rules.filter(
      (rule) => !String(rule.test).includes("woff(2)?")
    ),
    fonts,
  ];
  actions.replaceWebpackConfig(config);
};

Now all fonts load with file-loader.