Question

Font Shifting on load - starts with Times Roman and Moves to Global Settings

  • 22 July 2021
  • 3 replies
  • 128 views

Hi Guys and Girls,

Site : Hello Theme with Elementor Pro (Global Settings - Typography and Heading levels set to Montserrat).

In the first 1 sec of loading this is the font that displays

and then the elementor style kit fonts kick in 

How can I change  the first fonts to look like the end fonts which is Monteserrat or eliminate all the fonts from loading at all.

I have changed to settings in elementor  to no use elementor fonts but them and it makes no difference.

Any help would be appreciated


3 replies

Userlevel 4
Badge +2

You have what is called a FOUT (Flash of Unstyled Text). You can solve that by either integrating a loading screen or make sure you font styles are loaded first as a critical resource. You can do that with certain cache plugins.

Hi… I seem to be having the same issue. 

Were you able to fix yours? And if so, how did you go about it?

Thanks 

Userlevel 4
Badge +2

That the nature of font-display: swap attribute that is presents in your CSS

@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url('https://mobileskips.com.au/wp-content/uploads/omgf/pro-merged-403/montserrat-normal-100.woff2') format('woff2')
}

... many more

What font-display: swap does is first display fallback font (system fonts) until custom fonts or Montserrat are downloaded and then it will swap system fonts to web fonts.

 
:root{
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
  • If performance is a top priority: Use font-display: optional. This is the most "performant" approach: text render is delayed for no longer than 100ms and there is assurance that there will be no font-swap related layout shifts.

  • If displaying text in a web font is a top priority: Use font-display: swap but make sure to deliver the font early enough that it does not cause a layout shift.

You can Dig deeper: Best practices for fonts

Reply