[Support request] Fixing a flash of unstyled text

[Tom]

On page load, I notice a flash of unstyled text. I use Autoptimise and WP Fastest Cache and it still appears even with these plugins both disabled.

I thought I would try to fix the problem by hosting fonts locally, so I uploaded the files and added this to my style.css:

/* Open Sans */
/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://site.com/wp-content/uploads/open-sans-v18-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-300.woff') format('woff'), /* Modern Browsers */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-300italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('https://site.com/wp-content/uploads/open-sans-v18-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://site.com/wp-content/uploads/open-sans-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('https://site.com/wp-content/uploads/open-sans-v18-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://site.com/wp-content/uploads/open-sans-v18-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-600.woff') format('woff'), /* Modern Browsers */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('https://site.com/wp-content/uploads/open-sans-v18-latin-600italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://site.com/wp-content/uploads/open-sans-v18-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-700.woff') format('woff'), /* Modern Browsers */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('https://site.com/wp-content/uploads/open-sans-v18-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-800 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('https://site.com/wp-content/uploads/open-sans-v18-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-800.woff') format('woff'), /* Modern Browsers */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-800italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('https://site.com/wp-content/uploads/open-sans-v18-latin-800italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-800italic.woff') format('woff'), /* Modern Browsers */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://site.com/wp-content/uploads/open-sans-v18-latin-800italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

However the problem remains. In the customiser I still have the same font selected, Open Sans has not appeared under the system fonts.

Thanks

[David]

Hi there,

you have the font-display: swap; property in your @font-face CSS – which means the browser can load its own font whilst it waits for your selected font to load. Remove that property to stop that.

If you’re using the latest 3.1 typography then your local fonts wont appear in the list. You just need to add their name to the Customizer > Typography > Font Manager –> Add Font > Font Family Name field and make sure the Google Font toggle is off.

[Tom]

Hi David,

I played around for a bit and couldn’t find what you’re referring to. I tried enabling the Typography module but these options were not present. Then I enabled the font option under Customise > General (which has since disappeared – how would I ever turn this off?).

With this setting now enabled, Opens Sans appears under Font Manager, but there is no Google Font toggle. The options are auto, fallback, swap, block, and optional. On fallback, I still see the FOUT.

Thanks

[Elvin]

Hi Tom,

While you’ve hosted the fonts locally, it doesn’t seem to be using them as it’s still using Google fonts.

Make sure to have it toggled off on Appearance > Customize > Typography so the site uses the locally hosted font. Try preloading the font files as well so it loads early. 🙂

[Tom]

Hi,

Appearance > Customize > Typography does not have a toggle option. It has a dropdown under “Google font-display” with the four options I mentioned previously. https://i.imgur.com/75FJpbP.png

If I need to, how do I revert this to what was under Typography before? I am getting some font issues now (some things that should be bold are not on mobile). Please see the question I asked in my last post.

How do I preload a font and what does this achieve? I am just looking to prevent the FOUT from occurring.

Thanks

[Elvin]

You can click this – https://share.getcloudapp.com/DOu60xWn

And you should see this – https://share.getcloudapp.com/Qwu2m062

As for preloading, you can use Autoptimize’s extra tab options.
https://share.getcloudapp.com/o0u7w8BL

You place the font’s URL on the text field indicated. You can place multiple font urls separated w/ a comma. 😀

Preloading a font is a known solution for FOUT because the flash won’t occur if the font to be used is already loaded. The FOUT you see is actually because the font is loading later, in the middle of the site’s loading time. Once the font file loads, the browser swaps it in over system font and this “swap” you see is the FOUT.

[Tom]

The toggle has fixed the FOUT, thanks. Now I get the “Ensure text remains visible during webfont load” issue in PSI, which I assume preloading will help with.

How do I determine which files I need to preload? I don’t really want to include all 40 or so files if possible.

Also, as I asked before, how do I revert my Typography section back to how it was before, if I ever need to?

Thanks

[Elvin]

Try using the woff or woff2 files from the URLs you use here –
https://generatepress.com/forums/topic/fixing-a-flash-of-unstyled-text/#post-2038673

[Tom]

I am saying that I know I’m not using all of those font URLs, I only have about seven of them in use, I’m estimating. I don’t want to preload unnecessary files.

Also, for the fourth time, how do I revert my Typography section?

Thanks

[David]

Just for reference it was this @font-face property i was referring too:

There is a weigh off between having FOUT and having google flag: Ensure text remains visible during webfont load

The only way to have the best of both is to make sure the fonts load so damn quickly that google doesn’t register that as a complaint. To achieve that can involve a lot of work, from really optimizing the site to actually optimizing each of the fonts by removing the charsets and characters you don’t require.

Also, for the fourth time, how do I revert my Typography section?

Thats not possible, the new typography system is the future, the old version will be deprecated completely over time

[Tom]

Just for reference it was this @font-face property i was referring too:

I know, I removed that line from the CSS.

It does appear that PSI is suffering with Google Fonts turned off. Are you saying that what I am trying to do is not worth doing? It would still be good to avoid the FOUT if I can do this without increasing load times.

Thats not possible, the new typography system is the future, the old version will be deprecated completely over time

The update has caused a heap of small font issues. Please see the private information for an example. I am considering restoring a server backup at this point which I am extremely annoyed about, I didn’t realise it would change anything when you told me to do this.

[David]

Sorry if my replies has caused any frustration it wasn’t my intention.
The new typography system should be a pretty seamless transition when handling Google fonts. We should have been a little more cautious with our advice considering the fonts being locally added.

To cover the issue in the private info field, that looks like an ‘error’ in the CSS as its outputting the @font-face as a property value – maybe a missing bracket or other odd character somewhere ?

Regarding font loading – i can still see a Gogogle font request being made:

Which means a font in the Typography settings is still set to a google font.

[Tom]

I turned Google Fonts back on in Typography to fix the PSI issue, I can turn it off again if needed.

Turns out I messed up the customer CSS for that header when I pasted in the font CSS, it’s fixed now.

[David]

Was that to remove the Ensure text remains visible during webfont load warning ?

[Tom]

Yes, however that warning is still there either way. I think that having Google Fonts off lowered the overall score on mobile.

[Author]

Posts