0

Font switch on website load

manike 3 years ago updated 3 years ago 11

There is an annoying font switch on loading moonfruit websites in the first several seconds. Is this something thats going to be corrected in future?



Michael

Hi, can you please confirm an example site where you have seen this occur? And could you also confirm what browser you are using? If you'd prefer, you can chat to our support team about this directly.

Thanks

I get exactly the same thing on the responsive site www.keyracingnews.com. Load any page and the nav menu often first briefly loads in a Times Roman style font and then changes to the specified font. Has happened since outset. I'm using the latest version of Chome on a Chromebook and a 64 bit, Windows10 Desktop.with all updates loaded.


Thanks Will

I contacted Moonfruit support about this issue, and sent them a video of it happening to my site. They looked into it and have reported back that it's an issue with Google Fonts and it's been referred to their Q&A team to resolve. There is no timescale quoted, so it may be some time before it is fixed. There is a possible workaround, this is what they have told me:



If you stick purely to fonts above the dotted line things will be fine. The problem arises when you use the 'Google Font' listed below the dotted line...


Not great!


I am just going to have to live with this on my site for the time being...it's frustrating for sure, having put so much effort in, but hopefully Moonfruit can get this sorted over the next few months.

Hi I'm using Chrome on a mac. Happens on my site - www.manikemusic.com . Just tried in Safari and it didn't seem to happen though there was repositioning of text.

Same for me on my site chaletcristalmorillon.com. Loads in a Times style font and then changes - using Safari on a Mac.

The same thing happens to me when using chrome, mainly in the menu, when a site first loads. Looks like its something you need to look into asap.

Under Review

Thanks for reporting this to us. The workaround suggested is definitely not ideal! I'll get this investigated more and will get back to you this week.

Hi,

I spoke to one of our developers who confirmed that this 'Flash of unstyled text' is actually a browser problem that is widely written about online but is difficult to combat. Custom fonts such as Google fonts have to be loaded and applied by the browser.

Different browsers can handle this in different ways, some show a default font until the custom font loads, whereas some others might hide the page content until the font is loaded. The first option which you are experiencing is actually considered better by many, because loading the content faster rather than waiting for the correct font to load is better for your site performance.

As the support team advised, the web safe fonts that appear above the dotted line should not cause the same behaviour. I understand that this is undesirable behaviour, but it seems that we are limited in being able to prevent it unfortunately! We will keep an eye out for anything that could possibly minimise this behaviour in the future. 

Perhaps it might be better then to delay display until the Google font have loaded. I suspect that advice is out of date now with current internet speeds. Loading a fraction later in the vast majority of cases is all that will happen...if you browse around the net at responsive site you soon see ones that have the same issue...sites that have employed the workaround, just look better IMO

Dont think it's to do with internet speeds because our studio is in a business complex with high speed internet.

Yes, I have raised this point with developers as I definitely understand where you are coming from. We are going to see if the general work we do to enhance site performance improves the loading and if not, there may be other solutions we can test to minimize the flash.