Pages loading prior fonts, then the custom ones

Hi,

I have recently noticed in my live preview that when I load any of my pages, there is a brief initial load with all of the (what appear to be) default fonts and formats, then all of my customisation takes place.

See screen shot 'Initial' and 'Final' for comparison.

One of my colleagues has taken a look into this and thinks this may have something to do with each page loading the following script almost last and has suggested moving this into the head tags.

<script type='text/javascript'>WebFontConfig={google:{families:["Montserrat:regular"]}};</script>

Unfortunately I'm not too sure how I would approach doing this?

It also appears that we are loading the font 'Roboto' 4 times? Is there a way to correct this and only have it load once?

Can you please advise how I would be best going about having my page load as smoothly as possible, without appearing to display the default formats first?

Please let me know if you need anymore information. I have also granted support access should you need it.

Thanks! :slight_smile:

  • Rupok

    Hi Peter Rowlands,

    So sorry for the inconvenience you are having. I've checked the Upfront Fixer theme (as your current theme is built on Fixer) in my test site and changed font for different elements there, but I could not regenerate this issue. So this is your site specific issue.

    The script you mentioned, I could not find that in my test site running Fixer. Even I could not find that "Montserrat" font in the dropdown list in Upfront native Editor. So I think that font was added in a custom way on your site. But as I don't know how that font was added, it's pretty tough to find out how that script was called in the footer and how to take that to header. Can you please tell us how this font was loaded in your site?

    And I've checked your site source code but I could not find any reference to Roboto font. Am I missing something?

    Please let us know how these customization was made. That will give us valuable insight regarding the issue and will facilitate the troubleshooting process.

    Please send us as much details as you can. I'm looking forward to hearing from you and resolving this issue as soon as possible.

    Have a nice day. Cheers!
    Rupok

  • Nithin

    Hi Peter Rowlands,

    Hope you are doing good today. :slight_smile:

    I was able to notice this in your system, and I could see that the fonts are added through Upfront via the Theme Settings. I'm pinging the developer regarding this, so that he could give a better idea about this issue.

    Please do note that developers work round the clock with many critical issues, and hence have a slow response time. Either myself, or the developer will keep you posted asap. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Nithin

    Hey Peter Rowlands,

    Hope you are doing good today. :slight_smile:

    I got an update from the developer regarding this, this is due to the fact that to improve the websites load speed, Web Fonts are loaded asynchronously, however moving the fonts to the header won't help much here. When the script is used asynchronously it would cause the pages to render before the Web Font Loader is loaded, and hence this causes the issue what you are seeing.

    You can read more about this in the script doc:

    Using the Web Font Loader asynchronously avoids blocking your page while loading the JavaScript. Be aware that if the script is used asynchronously, the rest of the page might render before the Web Font Loader is loaded and executed, which can cause a Flash of Unstyled Text (FOUT).

    The FOUT can be more easily avoided when loading the Web Font Loader synchronously, as it will automatically set the wf-loading class on the HTML element as soon as Webfont.load has been called. The browser will wait for the script to load before continuing to load the rest of the content, FOUT is avoided.

    Going through your websites current configuration, the only option would be to make use of custom styles as mentioned above. You might find the following article on how to implement these classes:
    https://css-tricks.com/snippets/css/basics-of-google-font-api/#article-header-id-2
    https://prowebtype.com/delivering-web-fonts/

    For eg: suppose the fonts in <p> tag is showing this issue, you can add the following CSS:

    <?php
    function add_fallback_fonts() {
    
    	echo "<style>
    		.wf-loading p {
    			  /* styles for fallback fonts */
    			  visibility: hidden;
    		}
    	</style>";
    
    }
    
    add_action( 'wp_head', 'add_fallback_fonts' );

    You'll to follow the same for other divs/classes where you notice the issue with fonts, as shown above. You'll have to add the above code in your /mu-plugins folder, for more info please check this link: https://premium.wpmudev.org/manuals/wpmu-manual-2/using-mu-plugins/

    I hope this helps. Please let us know if have any doubts, we would be glad to assist you further your queries. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin