Text breifly flickers from old font to new when page loads
-
My collaborator switched all the fonts over on her site to something she liked more but noticed that when loading pages that the default font (that came with the theme) flashes up briefly before switching over to the new font. What can I do to fix that?
The blog I need help with is: (visible only to logged in users)
-
Hey kipvaughan,
Whenever someone opens a website, the default fonts get loaded and then switched to the one you choose.
It happens to maintain the user experience. Not everyone has the fast internet, especially, the mobile users.
There is nothing wrong with this.
-
-
Hi @kipvaughan, sadly this is one of the known issues with web fonts, and it affects all sites using web fonts, not just WordPress sites. There are a couple of ways to handle this.
One is to hold loading of any of the site elements until after the visitor’s browser is able do download the font from the font web server somewhere on the internet. The second, and our chosen method, is to tell the browser to start loading everything and then it will substitute the fonts after it downloads them. The reason we do this is that web users are getting more and more sensitive to slow loading sites, and if the internet or web font servers happen to be very busy, the amount of time the visitor will be starring at a blank screen may be too long and they will think there is a problem with the site and click away and go elsewhere.
There is a lot of discussion going on by web developers and the web font services on how to eliminate or improve this, but so far no one has come up with any real solutions.
If you wish to try this, the following CSS will halt the site loading and wait for the browser to retrieve the fonts before it starts loading your site. Do keep in mind the above information though as implementing this could mean you will lose some visitors if the internet for font servers are overly busy.
.wf-loading body { visibility: hidden; } -
Ok, maybe I’ll look into working with the CSS. I always wondered why I saw this on other sites. Glad I know why now.
-
Yeah, it’s one of the major drawbacks of web fonts, and there is a lot of discussion on what to do, but none of the proposed solutions really help that much. I know it will get better, just not sure when.
-
We have been talking about possibly switching themes at some point. If we did that and stayed with the default font from a particular theme would that resolve the font changing upon loading issue?
I have never need to change a theme before, is that major work to do? It seems like it would be a little difficult to know how everything would change over in the conversion. Have you found this to be a big deal?
-
We have been talking about possibly switching themes at some point. If we did that and stayed with the default font from a particular theme would that resolve the font changing upon loading issue?
Well, that depends. A lot of themes actually use web fonts, so the issue could still be there.
The only way to actually ensure that would not happen would be to set fonts that are actually installed on the majority of computer systems. This site has listings of those fonts and they are organized on font stacks, so that if someone didn’t have the first font, the second would load, and so on.
-
I forgot that there was a list of fonts that the website goes through. Very helpful link.
-
I’m following up here for thesacredpath.
We are close by if you need anything else. All the best :)
-
-
- The topic ‘Text breifly flickers from old font to new when page loads’ is closed to new replies.
WordPress.com Forums 