[Support request] Fixing a flash of unstyled text

Home Forums Support [Support request] Fixing a flash of unstyled text

Home Forums Support Fixing a flash of unstyled text

Viewing 15 posts - 1 through 15 (of 36 total)
  • Author
    Posts
  • #2038673
    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

    #2038904
    David
    Staff
    Customer Support

    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.

    #2039564
    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

    #2039577
    Elvin
    Staff
    Customer Support

    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. ๐Ÿ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #2039645
    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

    #2039652
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #2039665
    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

    #2039673
    Elvin
    Staff
    Customer Support

    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

    A wise man once said:
    "Have you cleared your cache?"

    #2039906
    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

    #2040187
    David
    Staff
    Customer Support

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

    2021-12-06_14-59-51

    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

    #2041033
    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.

    #2041083
    David
    Staff
    Customer Support

    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:

    2021-12-07_12-54-08

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

    #2041115
    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.

    #2041387
    David
    Staff
    Customer Support

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

    #2041896
    Tom

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

Viewing 15 posts - 1 through 15 (of 36 total)
  • You must be logged in to reply to this topic.