Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1320711

    Could someone tell me what this font glitch is? (See video below, and notice what happends every time i refresh the page)

    #1320848

    Hey adferger1,

    Thank you for the inquiry.

    Which font are you currently using? What you see is called FOUT or “flash of unstyled text”. You can read more about it in the following article.

    // https://css-tricks.com/fighting-foit-and-fout-together/

    The text “flashes” or changes because the font file is not yet loaded. Installing a cache plugin in this case usually helps.

    If you are a developer, make sure that the browser is not set to “Disable Cache”, because when this option is enabled, the browser always retrieves the font files from the original source instead of the local machine, which may cause FOUT. You will usually find this option in the Networks tab of the developer tools.

    Best regards,
    Ismael

    #1320854

    I have removed the “disable cache” now. And also installed Litespeed cache as recommended by my webhost.
    I have setup cloudflare as well.

    The font stil flashes

    #1321024

    Hi,

    Thank you for the update.

    Where can we see the issue? Please provide the site URL in the private field so that we can check it. You may have to disable the Enfold > Performance > File Compression settings temporarily.

    Best regards,
    Ismael

    #1321032

    Here

    #1321146

    Hi,

    For some reason, the font files (Lato, Opens Sans) in the above site are added last, only after every stylesheets and scripts are loaded, which causes FOUT. On our installation, the font files are loaded first as shown in the screenshot below.

    finansgruppen: https://postimg.cc/FfDJ90Xn
    localsite: https://postimg.cc/w7TZMpNf

    Did you modify any of the theme files?

    Best regards,
    Ismael

    #1321152

    No. Clean install, imported the demo content and selected Enfold 2017 as style

    #1321342

    Hi,

    Try to modify the enfold\framework\php\class-style-generator.php file and look for this code around line 767.

    document.getElementsByTagName('head')[0].appendChild(f);
    

    Replace it with:

    document.getElementsByTagName('head')[0].prepend(f);
    

    This should prepend the font files at the very top of the head tag, loading them first. Let us know if that helps.

    Best regards,
    Ismael

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.