Gatsby: Webfont usage within Sass (flickering)

Created on 8 Nov 2018 · 11Comments · Source: gatsbyjs/gatsby

Summary

This one is a bit sporadic so stay with me 😝

I write all of my styles in .scss. After reading https://www.gatsbyjs.org/docs/adding-images-fonts-files/ I decided with the webfonts I needed to load I'd stick them in /static/fonts/ and import them with Sass; no problem there at all. Developing locally, everything works fine and as expected.

I noticed something odd though when building a production-version of the app. When hovering over links (that looks like it prefetches data) the webfonts would flicker on the page. Super strange stuff. I first thought they were corrupted files, but when converting them to base64 equivalents and not importing, the flickering stopped.

Fast forward to today, I decided to give this a fresh-go with newly generated webfonts from the foundries that do not have this issue outside of Gatsby, and the flickering continued. It's only when I imported the files within my base layout; and created some inline styles with react-helmet to add in the @font-face declarations was I able to import the font files and not get the flickering.

Could it be the prefetching that's causing the issue? I'm pretty certain it's not the files themselves, but it's only within Gatsby that this is an issue - as other React projects works fine (based off of create-react-app).

stale? question or discussion

Source

zslabs

😕2

Most helpful comment

We were also having this issue and seem to have been able to resolve it by adding a static css file with the font declarations and using gatsby-browser.js to import that file globally, e.g. import './src/styles/global.css'

jpalmieri on 28 Nov 2018

👍10 🎉8 ❤4 🚀1

All 11 comments

I also tried just putting a static .css file with those font-face rules in the JS imports; and it's still doing the flickering. What only seems to work is a static <head> inclusion of those styles.

zslabs on 9 Nov 2018

jpalmieri on 28 Nov 2018

👍10 🎉8 ❤4 🚀1

That’s super strange! I tried the same and could have sworn it worked initially, and then it went back to flickering. It’s partially a relief to know I’m not crazy over here 😜

Buuuut, reading that you’re adding that in with gatsby-browser may be good to try. Thanks for the tip!

zslabs on 28 Nov 2018

👍3

+1 On this issue, had the same thing happen, but only for links on pages that were under a subdirectory of /pages. (So basically all links to /pages/careers/.. caused the reloading of fonts and flickering)

@jpalmieri 's solution works tho. Thanks for this!

liorbrauer on 23 Jan 2019

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

gatsbot[bot] on 17 Feb 2019

This is still a pain. It would be cool to be able to declare font-faces in GlobalStyle.

sarneeh on 20 Feb 2019

I encountered the same issue when loading the fonts from .sass, but when moving @font-face to a .css and importing it in gatsby-browser.js instead the problem is resolved.

In my case this only happened to /about/, for some weird reason.

patrikarvidsson on 20 Feb 2019

👍1

I "think" this could be fixed as of https://github.com/gatsbyjs/gatsby/pull/11800

zslabs on 20 Feb 2019

I use styled-components so didn't want to have global css file, like the above suggested fix. Instead I included this in my GlobalStyle.js file:

// Hide fonts until webfonts have loaded to avoid FOUT
.wf-loading {
  visibility: hidden;
}

CC: @sarneeh

ezeikel on 22 Feb 2019

is this still an issue? It should have been fixed with #11800 our apologies.

wardpeet on 22 Feb 2019

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

gatsbot[bot] on 5 Mar 2019

Was this page helpful?

0 / 5 - 0 ratings