Fonts flicker on load and reload

[codymjarrett]

I'm building out my portfolio site using Gatsby and I'm pretty much finished with it but I'm running into a problem with my fonts producing a sudden flicker on page refresh. Almost as if the site is falling back on fonts then quickly loading the intended font-family. I checked the network tab and the fonts are being loaded with a 304 status code, I'm not sure if that could be attributed to the problem or not. This was happening when I was importing the fonts from Google fonts in a sass file (using the @font-face import) and figured that was the problem. So I instead reached for the typography.js package to load in fonts, I'm requiring the two fonts I'm using in the gatsby-browser config file but it's still happening. Here's a link to my site for reproducing the problem.

[LekoArts]

Having a flash of unstyled text/show of fallback text is pretty normal, but not on subsequent reloads. Please provide access to your code or create a reproduction. Also, try using the GoogleFonts option of the plugin: https://kyleamathews.github.io/typography.js/

Lastly, try our docs:
https://www.gatsbyjs.org/docs/recipes/#using-google-fonts

[codymjarrett]

Hello @LekoArts, thanks for the reply. I'm a little confused by what you mean by unstyled text because you'll see in my repo I've styled both my body tag and the logo tag with the appropriate font-family selections. Here's the repo. If you go to src/sass/base/base.scss you'll see the body tag styled (line 14), and then in src/sass/layout/header.scss you'll see that I styled the class header__logo (line 188) with a font-family selection also. And I am also using the typefaces package to load fonts. See the gatsby-browser.js file where I'm requiring both fonts from the google package. Here's also if you go to the host site you'll see that on all reloads the flash is happening. Please let me know if you need anything else because I'd really like to find a solution to this problem. Thanks.

[codymjarrett]

@LekoArts I replaced the typeface package with the typography package and the flickering is gone! Thanks! But now I have another problem. It seems like the fonts on my mobile device aren't matching what I'm seeing in my chrome dev tools when I switch to the mobile view. So it seems for whatever reason the styling isn't transferring to mobile.

[github-actions]

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!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

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

[github-actions]

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.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

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

[VladRDV]

Importing fonts from gatsby-browser.js
import "./global/styles/fonts.css"
solves the issue

fonts are still beeing stored in static/fonts/ and imported in css file as usual

`
@font-face {
font-family: "Anton";
src: url("../../static/fonts/Anton-Regular.ttf");
}

@font-face {
font-family: "Work Sans";
src: url("../../static/fonts/WorkSans-Thin.ttf");
font-weight: 100;
}

@font-face {
font-family: "Work Sans";
src: url("../../static/fonts/WorkSans-ExtraLight.ttf");
font-weight: 200;
}
@font-face {
font-family: "Work Sans";
src: url("../../static/fonts/WorkSans-Light.ttf");
font-weight: 300;
}
@font-face {
font-family: "Work Sans";
src: url("../../static/fonts/WorkSans-Regular.ttf");
font-weight: 400;
}
@font-face {
font-family: "Work Sans";
src: url("../../static/fonts/WorkSans-Medium.ttf");
font-weight: 500;
}

`

I've checked, this works for both develpment and release

[prabhakarnikhil14]

It was happening on my site too. The issue was that I didn't change the font-family in the autogenerated layout.css instead given font-family to individual components. Setting my desired font in the layout.css fixed the issue for me.

[VictorOteroUFV]

I have something strange happening in the same way in my page. I put open-sans as the default font but it changes in the first load and in reloading but i dont charge any other different font.
Here is the website i´m working on: https://www.ennomotive.com/
If someone knows which is my mistake please help me know.
Thanks a lot.