Cloudflare fonts "font-display: swap" causes unpleasant FOUT

Feedback

I believe I implemented CF fonts correctly, and confirmed via the browser dev console that it was working – but the “font-display: swap” descriptor embedded in the CF style statement for fonts causes the font to resize during page-loading – and that looks yukky even though it happens in a split-second!

To workaround this I just took the CF fonts code and ‘hardcoded’ it into the headers on my page – and removed the font-display: swap.

I still get the benefits of CF fonts without the unpleasant effect of the swap.

Wanted to share this here - I may also ask for advice elsewhere in case I’m not implementing font loading optimally.

Thanks Cloudflare!

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.