[Support request] Fixing a flash of unstyled text

[Tom]

I have the URL. I don’t know how to properly interpret the results of that waterfall, which is why I asked about the image you mentioned in my previous message. I think the next step is to preload by putting the URLs into Autoptimise as you have previously suggested. If you can help me to understand which exact font URLs to use as mentioned before,m that would be much appreciated (as well as any other guidance you may have, other than removing display: swap;).

[David]

Just to be clear – are you going to Load fonts Locally or are you still loading them from Google?

[Tom]

I am currently loading them from Google. I was under the impression that the next thing to try was to readd the files locally again and try to load them myself, with help from Autoptimise preconnect/preload.

[David]

Personally i use PerfMatters to locally load and preload my fonts.
You can do it manually but you will need to limit the preload to just the .woff2 which is the most widely supported font.

To begin i would:

1. review the number of local fonts you’re are loading – do you require all of the variants here:

https://generatepress.com/forums/topic/fixing-a-flash-of-unstyled-text/#post-2038673

ie, 300, 400, 600, 700, 800 and the italic versions

Its best to load just the ones you’re using as this will make a big difference to the resource loading.

Anyhow add the local fonts you do require. And disable any Google font options in the Customizer.

2. Adding preload links:

a) Create a new Hook element:

https://docs.generatepress.com/article/hooks-element-overview/

b) in the hook add a preload link for each of the fonts you require eg.:

<link rel="preload" href="https://site.com/wp-content/uploads/open-sans-v18-latin-300.woff2" as="font" type="font/woff2" crossorigin="anonymous">

You will need to repeat that with the correct URL for each font you want to preload.
You may want to consider just preloading the fonts used above the fold.

c) set the Hook to wp_head
d) set the Display Rules to the Entire Site

[Tom]

Its best to load just the ones you’re using as this will make a big difference to the resource loading.

How do I tell which ones I’m using, is there a list somewhere?

To confirm I don’t need to add any of the CSS I had before?

[David]

If you use PerfMatters you don’t require any CSS. Or locally loaded fonts. The Plugin does all the work.
If you’re not using that plugin then you still need this CSS:

https://generatepress.com/forums/topic/fixing-a-flash-of-unstyled-text/#post-2038673

The font variants required would be the ones you applied to any typography element in Customizer > Typography.
I had a quick look at the CSS being loaded on the site and the main variants i see are:

300, 400, 700.

So you may want to discard the others in the CSS.

[Author]

Posts