Font glitch

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

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

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

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

Hi,

It is actually working properly on our end (screenshots above), but for some reason it’s not working on your installation. It is also a minor modification, which relocates the position of the stylesheet or link element in the head tag. Please post the FTP details in the private field so that we can access the file server and test the modification.

Best regards,
Ismael