Archived topic
[CLS Issue] Maybe font is loading too late
5 replies · Started by Alessio on April 23, 2021
Hello Guys,
I've tried to search for an answer in old topics but I didn't find one, I hope I'm not opening a useless thread.
I have an issue with the font that display h1 and h2 on the homepage, I added the font locally and added the code to use it as a system font, still when it loads it causes a switch in layout, the issue is happening only on mobile.
The font that cause the issue is Oxygen, I add a screenshot here so you can see. https://ibb.co/zGz1VF1
Thanks for your help.
Alessio
Hi there,
you can preload the font - this will stop the FOUT issue.
Plugins like Autoptimize and WP Rocket provide options to Preload fonts.
Thank you for your reply David!
Maybe I'm wrong, but I think I preload it correctly because I don't get the alert from PSI to preload the font, I just get the alert to "Ensure text remains visibile."
I add a screenshot of the hook for preloading in the private information area.
EDIT: The screenshot is only the preloading of fontello, not the oxygen font, but I get the same alert for the fontello font, I think it's the same issue for both.
EDIT2: I just found out that even if I've installed Oxygen locally as a system font, it's not loading it, it still uses the Oxygen from Google fonts. After I choose Oxygen in Typography on H1 and H2 settings and press "Publish" in customizer, when I come back in customizer the Oxygen font that is selected is the one from the google fonts. I can't understand why it doesn't remain the one I've installed which is a system font and switches back to the one from google fonts.
Sorry for the long post.
Thank you.
There are two methods for removing the “Ensure text remains visibile.” warning. Both have positives and negatives:
1. Preload method - will impact the initial loading time of the site
2. font-display: swap; property when adding local fonts - will most likely cause CLS.
But lets deal with the correct font loading.
If you're selecting a Font under the system fonts ( not google ) and its reverting to the google font then try updating the name to something different eg. Oxygen Local
Theres two places it will need to change:
1. In the @font-face CSS > font-family: 'Oxygen Local';
2. In the generate_typography_default_fonts snippet > $fonts[] = 'Oxygen Local';
Thanks to your suggestions I solved everything!
Thank you David.
Glad to hear that!
