Navigation

Tried testing your Core Web Vitals through Lighthouse on mobile, and your CLS scores were good: https://share.getcloudapp.com/kpu8yPL2

1 and 3. The small CLS is caused by the font swapping from the fallback font to the font you’ve set. You’re already preloading the font which is why the CLS is very minimal.

You’ll see this CLS when you use a very slow network: https://share.getcloudapp.com/eDuXoQBk

2. The length of your texts, specifically, the first one and the fifth one is respectively longer and shorter than others.

Perhaps you can try to make the font-size a bit smaller or make them two rows by changing the container Width?: https://share.getcloudapp.com/6quz0K1R

Alternatively, you can use GB Buttons Block with 6 Button Blocks inside, then add equal left paddings. On Smaller screens they would wrap in a row.

Kindly let us know.

Thanks!
What is the best way to set up the fonts so that they don't swap?

Well, font-display: swap is actually already a good way to avoid CLS.

For instance, without this setting, there will be a moment where your text would be invisible which you’ll want to avoid as well. This is called FOIT or flash of invisible text: https://web.dev/font-display/#how-to-avoid-showing-invisible-text

The best way to reduce CLS is to assure that the font gets served as fast as it can.

You can Locally host the font to reduce loading time: https://docs.generatepress.com/article/adding-local-fonts/

Or you can try to play around with the font size so it doesn’t look to large or small in comparison to the fall back font.

Another approach is to filter the System Stack font as mentioned by Tom here: https://generatepress.com/forums/topic/specifying-a-fallback-font-for-locally-added-fonts/#post-870701

I would suggest try hosting the font Locally first.

Hope this clarifies!