Page refresh shows different font(s) first

That’s actually something popularly known as ‘FOUT’ — Flash of Unstyled Text — and this is not quite a problem of Customizr itself, but rather an option chosen by the designers when loading Google Fonts, namely, telling the browser what to do while it waits for an external font to be downloaded.

Essentially there are three main options, none of them 100% satisfactory, and, these days, the choice is up to the Web designers:

1. ‘Flash of invisible text’ or FOIT: The browser basically doesn’t display anything until the font fully loads (i.e. all text remains invisible). This used to be the original, default behaviour for loading custom fonts. The main problem with that approach is that the custom font may never fully download (imagine that the font server is down), and so visitors will not be able to read anything! Worse, they will not even know that there is something to read…
2. ‘Flash of unstyled text’ or FOUT: The browser replaces the custom font with a system font while it waits for the custom font to download. That’s what Google Fonts uses by default these days. The advantage, of course, is that the text is immediately readable; the disadvantage is that it breaks the visual design intended by the Web developer, and often causes that ‘shift’ you mention, due to different (and inevitable) metrics between the built-in system fonts and the custom font
3. While the custom font is downloading, replace the text with some sort of ‘placeholder’ (say, a gray rectangle, or a very blurred outline of meaningless words) that has the correct metrics to avoid the ‘shifts’; once the font loads, it replaces those placeholders. This has the same disadvantage as FOIT, but, at least, provides readers with a visual clue that something is going to be written there (and it will be in the ‘right’ place, too — no shifting around)

There are obviously more alternatives and variants. A good compromise is to keep the text invisible for only 0.1 seconds, hoping that the font loads in that amount of time; if it does, replace the invisible text immediately. If not, well, go for one of the two last options above (usually, FOUT, to allow people to at least be able to read something, even if with the wrong font and formatting). The ‘0.1’ seconds are not an arbitrary value. Humans (and at least most mammals) are only able to process visual input after roughly 0.2 seconds. That’s not the time that the eyes capture the image and send it to the brain — that’s considerable faster! — but rather the time it takes it for a human to process what they’re seeing. In other words, if you can load and draw things on the screen well below the 0.1 second threshold, your brain will not be aware of that (even if the eyes might!), and register it as ‘instantly’. 100ms might seem not much, but that’s enough for a modern CPU to process roughly 10 billion instructions — or for broadband access to download half a megabyte of data (which is often enough to download a custom font — when using WOFF2 fonts, these usually take just 50-80 Kbytes of disk space, so you can load half a dozen of those in 0.1 seconds — more than enough for most sites, and that includes icon fonts such as Font Awesome!). There are other tricks to deal with the flickering, but they may not work on all browsers.

Anyway, as far as I can see, Customizr sticks to Google Fonts with the default settings, which is font-display: swap;. This is essentially pure FOUT — thus the shifting you see. You can load Google Fonts with different settings, but Customizr uses the defaults — I guess that whatever Google thinks is best for them, ought to be good enough for us, too. Nevertheless, you can change that yourself — basically, by spawning a child theme and loading your own Google Fonts with whatever setting you prefer, overriding the defaults.

Here are a few pointers discussing the issue further (and explaining it far better than I can!):

https://thabo-ambrose.medium.com/prevent-text-font-flickering-caused-by-using-a-custom-font-family-983c4b8d548d
https://css-tricks.com/fout-foit-foft/
https://css-tricks.com/almanac/properties/f/font-display/
https://www.zachleat.com/web/google-fonts-display/

Many of those articles even point to further information on the subject, so you should be able to find a solution there.

Note that Customizr doesn’t simply use the Google defaults because somehow they believe this is ‘better’ or ‘worse’ than any other alternative. Google did not always use font-display: swap; as default. The discussion on what is the ‘best’ method has been around since the first custom fonts started appearing on websites (almost two decades ago!) and it’s by no means closed. Like web design, this is also subject to fads. Currently, if the fonts haven’t been loaded yet, FOUT is preferred, although, naturally enough, web designers welcome all possible tricks that avoid FOUT. But this is by no means consensual. If someone finds this answer in 5 or 10 years, they may laugh and say, ‘those guys during the pandemic were clearly insane when they promoted FOUT over FOIT!’ ??

Happy hacking!

Concerning this problem, we also battled against the nasty “FOUT” effect.
On our side, it happened when we chose two fonts to display.

The best solution for now, as we found out, was to select only one font in the Customizr template preferences. It works perfectly.

Try it out. ??
Best regards.