html - Avoid FOUT issue seen on Headless website

Solution:

font-display: swap doesn't prevent FOUT. Quite opposite - often it can cause it.

font-display: optional Can Solve FOIT And FOUT

This option basically makes web fonts optional, or to put differently, if the font isn’t there by the time the page needs it, then it’s up to the browser to never swap it.

But this is not the greatest solution because the web font won't load sometimes. What I would do is:

• Keepfont-display: swap but improve font style matching with the fallback font You can use font style matcher for that (https://meowni.ca/font-style-matcher/)
• Optimize font -> remove unused glyphs and weights
• Serve font from the same origin as a website is served
• If font is served from 3rd party service due to legal reasons you can cache it using Service Workers.

You might also don't care as this is a minor performance issue (usually).

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.