Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • October 18, 2018 at 5:28 am #1023139
    HuxburyQuinn

    I wrote this incredibly long forum entry and lost it when I refreshed the wrong tab, Doh!

    Anyway the gist of it is that …
    ENFOLDS > General Styling > Fonts – any font that is not a theme Default Font or not a Web Safe Font causes a Flash of Unstyled Text (FOUT)

    Present under the following parameters:

    1. WordPress 4.9.8
    2. Enfolds 4.5 & 4.3 – Combinations Parent and Child Theme Fully tested
    3. No Server Cache solution
    4. No WordPress Cache Plugin
    5. All WordPress Plugins Disabled
    7. Enfolds > Performance > File Compression > CSS file merging and compression > Disabled
    8. Enfolds > Performance > File Compression > Javascript file merging and compression > Disabled
    9. Enfolds > Performance > Delete old CSS and JS files? > Checked
    10. Browser Cache Cleared
    11. Browser Loaded with hard refresh and Incognito
    12. Changed Chrome Developer User Agent
    13. Chrome Developer – Caching > Disable Cache

    FOUT OCCURS in:
    MAC MINI (Desktop) MAC OS X YOSEMITE 10.10.5 in Google Chrome ver 69 and Firefox Ver 64
    MACBOOK PRO mac OS Sierra 10.12.6 In Google Chrome 68.0.3440.106 (Official Build) (64-bit)
    MACBOOK PRO mac OS Sierra 10.12.6 in Google Chrome 70.0.3538.67 (Official Build) (64-bit) & Firefox 56.0 (64bit) & Firefox 62.0.3 (64-bit)

    FOUT DOES NOT OCCURE in:
    Mac Safari – any version I have

    If you return the ENDFOLDs back to the default theme fonts the FOUT disappears in Chrome and Firefox

    I believe it to be an issue with the way Enfold loads the Google Fonts.

    Any one else care to way in on this issue.

    October 19, 2018 at 12:33 pm #1023895
    Victoria

    Hey HuxburyQuinn,

    Can you please make a small screencast of the issue? I do not seem to reproduce it.

    Best regards,
    Victoria

    October 19, 2018 at 2:04 pm #1023924
    HuxburyQuinn
    This reply has been marked as private.
    October 21, 2018 at 7:28 pm #1024568
    Victoria

    Hi HuxburyQuinn,

    Thank you for that.
    Well, you need a DNS prefetch for the fonts that you want to use or have more aggressive caching for them.

    I am not seeing the effect in Chrome on my Mac. What is your connection speed?

    Best regards,
    Victoria

    October 22, 2018 at 3:44 am #1024653
    HuxburyQuinn

    Hi Victoria,

    I’m sure id know if it was my internet connection. Any way speed test results shared privately.

    As I was very specific with my browser versions and operating system – I should ask you what is your test environment? As I have proven that it exists in 2 OSX operating systems on Chrome and Firefox.

    I added the preconnect to the <head> in the child theme head.php

    <link type="text/css" rel="preconnect" href="//fonts.gstatic.com/css?family=Lato:300,400,700%7COpen+Sans:400,600" id="avia-google-webfont" crossorigin="anonymous">

    However, this had no effect on the FOUT.

    I also edited the parent theme ENFOLD > framework > php > class-style-generator.php
    Lines 495 – 498 to the following:

    
f.type 	= 'text/css';
f.rel 	= 'preconnect';
f.href 	= '//fonts.googleapis.com/css?family=".apply_filters('avf_google_fontlist', $this->google_fontlist)."';
f.id 	= 'avia-google-webfont';
f.crossOrigin = 'anonymous';

    However, this did not work either, as the rel=stylesheet was not declared on the font <a href and the theme did not change the fonts.

    I also downloaded the fonts from google to host locally. Importing the fonts into Enfold ( https://kriesi.at/documentation/enfold/typography/#how-to-upload-custom-fonts ) however, again this had no effect on the FOUT in Chrome and Firefox.

    Interesting enough, the FOUT does not occur in any Safari browser. regardless of load speed (throttled)

    I have also provided a link to an additional video of the FOUT in FIREFOX

    FYI

    https://developers.google.com/fonts/docs/technical_considerations

    Technical Considerations
    Google Chrome
    Chrome renders the rest of the page, but until the font has loaded, it displays a blank space in place of the text that uses the font.

    Mozilla Firefox
    Firefox first displays the text in the default font, and then re-renders text in the font once it has loaded. This behavior is known as a “flash of unstyled text.”

    Apple Safari
    Safari renders the rest of the page, but until the font has loaded, it displays a blank space in place of the text that uses the font.

    October 24, 2018 at 3:18 am #1025755
    HuxburyQuinn

    Hi Victoria,

    This was solved by activating Siteground’s SuperCache solution with Cloud flare.

    That, said, it still should not occur.

    Put this one on the back burner to investigate with the next release.

    thanks ; )

    October 24, 2018 at 4:16 pm #1025959
    Ismael

    Hi,

    I’m not sure if it’s still relevant but I found this article related to the issue.

    // https://www.paulirish.com/2009/fighting-the-font-face-fout/

    Best regards,
    Ismael

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