Why Does My Landing Page Show a Different Font Style Before My Page Fully Loads?

Follow

When you first load your landing page, you may notice that the fonts on your page will briefly load as the default browser fonts rather than the custom fonts you’ve chosen. 

This is because your stylesheet takes longer to load than the HTML on your page. While your stylesheet loads, the browser will show the default fonts and will apply the stylesheet as soon as it’s rendered fully. 

This process is called Flash of Unstyled Content. Check out Wikipedia’s explanation of what flash unstyled content is, and how it works

While some workarounds exist using JavaScript and CSS, adding a script can run the risk of increasing your page-load speed. 

It may be worth checking in with a developer or web designer on some tips or custom scripts to prevent a Flash of Unstyled Content!


Do you agree or disagree with this statement: This article helped me find the information I needed quickly and easily.

Select an option and leave us some feedback in the comments:

Strongly DisagreeDisagreeSomewhat DisagreeUndecidedSomewhat AgreeAgreeStrongly Agree

Measuring Customer Effort Score with Nicereply