Hi, everyone.
I just started testing Netlify and I must say it seems really awesome. However, I am experiencing something really weird (in my eyes), and being a noob at this I can’t figure out what is causing it, but I’m sure someone in here can.
I post it here, because it only happens when the app is rendered at Netlify.
When the site loads for the first time, the fonts start out a bit misplaced and bigger than they should be. This shows extra on the button that starts out huge and then all the text jumps into place with the right size after a half second or so. If you refresh multiple times you can see it very clearly. Does anyone have any idea what might cause this?
site url: https://upbeat-raman-e4e66f.netlify.app/
Hey @arnelamo,
Really weird glitch. I tested on Firefox, and some SVG’s reveal suddenly. Maybe it’s releated with your reveal animation library or something.
Hey, thanks for the reply. I found something in the network tab, that looks wrong - however I really have no idea.
The first document that loads shows the site without much of the CSS implemented, it seems. The next documents loads images, css, javascript and so on.
However, the same site hosted at Heroku shows something else. There, the first document that is loaded says “You need to enable JavaScript to run this app.”. The Heroku version is not built in Gatsby though, but the site renders perfectly when i build locally and test in with “npm serve”, so it seems unlikely Gatsb is the problem.
Does this give away any clues to anyone?
Edit:
I removed all the @fortawesome/react-fontawesome icons and deployed to Netlify again. The “blowing up” of the icons disappeared, naturally, but still there is a little “twitch” on the h1 especially. When i look at the network tab and refresh, i can see that the “twitch” occurs when the css-files are loaded, which of some reason happens *after * the first document (the page itself) loads. This seems very odd, because the first ducument has colors and everything (as seen in the image), so I would really appreciate if someone had any tips for me as to what could be the problem here.
hi @arnelamo!
the twitch in the H1 is the Google Fonts loading in — you’ve got them set to use font-display: swap, which will show a fallback font until the full font file is loaded from Google
in general this is a good thing — it means your site is immediately readable
the only way to really “fix” this is to inline the styles and font files (base64-encoded) so the page literally can’t show up until the styles and font are loaded. bear in mind, however, that this means your site will be slower to load, so probably this isn’t what you’re after
the other way to “fix” this is to use system fonts, which doesn’t come with performance costs but means you don’t have a custom font anymore
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
my recommendation would be not to worry about it — font-display: swap is a pretty common pattern, and if you look at other sites as you browse around you’ll see it happen everywhere. the layout didn’t break for me when the fonts swapped, so to me it looks like the page loading, not like a bug
let me know if you have other questions or if you’re seeing something different than what I described. good luck!
1 Like
Hey, @jlengstorf.
You’re the tutorial guy 
I did one of your tutorials the other day (Gatsby - Auth0), it was awesome.
Thanks for the reply. Actually, I fixed the first issue by replacing the fortawesome icon library with the react-icons library.
Secondly, i found that when i removed the “gatsby-plugin-prefetch-google-fonts”, the problem with the H1 text disappeared.
Before i removed it, the plugin was set up like this:
{
resolve: `gatsby-plugin-prefetch-google-fonts`,
options: {
fonts: [
{
family: `Raleway`,
variants: [`400`, `600`],
},
],
},
}
So, now it seems everything is working fine 
1 Like
