Hi!
When my site is loading, the font is bugging (as in screenshot 1, when the real font should be as in screenshot 4).
I am trying to make a loading animation, but then the font is still bugging BEFORE the animation, then the animation starts (see screenshots 1-4). Even though I put the initial state of animation as ‘Show’ (I’ve tried to build it 100 times and nothing works).
What is wrong?? What should I do?
Thank you.
Here is my public share link: Webflow - NYANYI
I don’t think you have an issue.
Your webpage loads a lot of things at the same time and the browser is displaying the fallback/system font until the font you want is loaded then it swaps.
Options, change opacity to 0% on the element.
On load change it to 100%
If the font is upload to Webflow change it to block which waits 3 seconds before displaying fallback.
Or ideally reduce the number of file requests when the viewport is loading.
Dear mthornton,
thank you for your answer!
how do I reduce the number of file requests when the viewport is loading?
also how do I change the font to block?
Julia here is how you change the font to block
To find which files are download, use separate tools such as Web Dev Tools or GTmetrix.
Then check which ones can reduce or be delayed, e.g. the number of fonts, images, JavaScript.
Note: for those interested, message me for details on a paid service specific to Webflow designers for Google PageSpeed Insights analysis.
There is one more thing you could do which wouldn’t require you to make any updates to laod animation and other things. You can preload the font, the way Webflow does it is that they load custom fonts all the way at the end of CSS. And keeping in mind that Webflow doesn’t sepparate css for each page but rather uses one master file for whole css there are quite a few things that load before fonts actually do.
Example of how you preload the fonts:
<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>