Variable fonts flashing in Chrome on first scroll.

[tettoffensive]

I'm using the variable font in a Vue.js app like the css below. On first page load, as I scroll and text using the font comes into view the text flashes. It doesn't always happen. I think it's dependent on the font-weight set in the css. Though I'm not 100% sure. I'm having trouble reliably saying. But I see it more often when using different font weights like 620 or 750. Whereas, I'm not seeing it at font-weight 600.

@charset "UTF-8";

@font-face {
  font-family: 'Source Serif Pro';
  font-weight: 200 900;
  font-style: normal;
  font-stretch: normal;
  src: url('~@/assets/fonts/SourceSerif/WOFF2/VAR/SourceSerifVariable-Roman.ttf.woff2') format('woff2'),
       url('~@/assets/fonts/SourceSerif/WOFF/VAR/SourceSerifVariable-Roman.ttf.woff') format('woff'),
       url('~@/assets/fonts/SourceSerif/VAR/SourceSerifVariable-Roman.ttf') format('truetype');
}

@font-face {
  font-family: 'Source Serif Pro';
  font-weight: 200 900;
  font-style: italic;
  font-stretch: normal;
  src: url('~@/assets/fonts/SourceSerif/WOFF2/VAR/SourceSerifVariable-Italic.ttf.woff2') format('woff2'),
       url('~@/assets/fonts/SourceSerif/WOFF/VAR/SourceSerifVariable-Italic.ttf.woff') format('woff'),
       url('~@/assets/fonts/SourceSerif/VAR/SourceSerifVariable-Italic.ttf') format('truetype');
}

*, *:before, *:after {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

[tettoffensive]

UPDATE - I just realized this happens with the other font files as well, not just the variable fonts

[tettoffensive]

Issue was with Nuxt.js. Switched from loading as fonts.scss to fonts.css and flashing went away

[frankrolf]

Great to hear, and thank you!