Archived topic
Can't find solution to my FOUT issue
7 replies · Started by Maria on March 2, 2022
I'm locally hosting Google fonts Oswald and Oxygen. I'm getting FOUT with Oswald. (Not sure why not with Oxygen). I've read through the forums and followed the instructions here: https://generatepress.com/forums/search/flash+of+unstyled+text+with+google+fonts/ but still having issues. I'm using SG Optimizer plugin. I turned off Combine CSS and that didn't help. I'm wondering if I should edit the Exclude from CSS Combination, but I have no idea what to enter. Any help would be appreciated.
Hi Maria,
It seems that you have font-display: swap. This means that the browser can load its own font while it waits for your selected font to load. Removing this property would stop this behavior.
See: https://share.getcloudapp.com/ApuJBOB8
“However, There is a weigh-off between having FOUT and having google flag: Ensure text remains visible during webfont load.
The only way to have the best of both is to make sure the fonts load so quick that google doesn’t register that as a complaint. To achieve that can involve a lot of work, from really optimizing the site to actually optimizing each of the fonts by removing the charsets and characters you don’t require.”
For reference: https://generatepress.com/forums/topic/fixing-a-flash-of-unstyled-text/#post-2040187
Hope this clarifies. :)
That's strange, I'm not seeing font-display: swap. Where do you see that?
For one this seems like critical CSS loaded by a plugin but we’re not sure: https://share.getcloudapp.com/E0ug5EZP
There also some coming from Siteground optimized-combined CSS file: https://share.getcloudapp.com/rRu1yLGJ
There are also fonts failing to load in your site: https://share.getcloudapp.com/RBun5XOb
Also see: https://share.getcloudapp.com/JruOk7gj
I suggest that you first make sure that the specific Font is being hosted/enqueued from one location.
Hope these help! :)
That's not my stylesheet. Here's my stylesheet: https://www.screencast.com/t/o5wRvTP5Wprm Here's the link to my site: http://lindah13.sg-host.com/
Hi there,
those styles that Fernando pointed out are being inline loaded in the <head> of your site:
https://www.screencast.com/t/FP6nPONI
I would hazard a guess at it being the SG Optimizers Font optimization doing that.
Thanks for the clarification.
You're welcome
