Default font appearing before site font

pssethi · Member · Sep 2, 2015 at 9:23 pm
Copy link

Add topic to favorites
Hi,

I am having trouble with the default font showing up before my site font loads. I’ve tried adding the following code, but it’s still happening:
```
.wf-loading body {
	visibility: hidden !important;
}

.wf-loading .site-title {
	visibility: hidden !important;
}

.wf-loading .primary-navigation {
	visibility: hidden !important;
}
```
It’s a brief flash of the default font before mine shows up. I’ve seen it on Firefox and Chrome. Can anyone help me?

Thank you!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Sep 3, 2015 at 12:48 am
Copy link
Hi, sorry for the issue. We’ve seen this on few occasions. There are a number of things that can cause this, especially with custom fonts, which are loaded from a web font server that is separate from our servers, so your browser has to get the fonts from a different location on the web. If servers are busy, or the internet itself is a busy, this can happen. I’ve chatted with our developers on this just recently, but I’ll chat with them again and get back to you.
shaunadegruchy · Member · Sep 3, 2015 at 3:49 am
Copy link
I’m having the same issue with http://www.artizenacademy.com. it’s a private site while I get it up and running, but I worry that it will continue to load both fonts when I launch. Please keep me posted with this, as well.
thesacredpath · Member · Sep 3, 2015 at 6:55 am
Copy link
@shaunadegruchy, thanks for letting us know and we will keep you posted.
pssethi · Member · Sep 3, 2015 at 2:02 pm
Copy link
Thank you so much! I would love to fix this issue. No one I have spoken to has been able to come up with a solution yet, and it is very noticeable to me and others visiting my site. I appreciate your help.
thesacredpath · Member · Sep 4, 2015 at 5:18 am
Copy link
Thanks for your patience everyone.

Due to the way browsers handle custom fonts, the behavior you are seeing is intentional. When browser encounter web fonts, such as the custom fonts used here, and even some of the default web fonts in a web page, they hide the text while the web font is loading. If you are on a slower (often mobile) connection, this can leave the page unreadable for a long time, which can frustrate visitors and possibly they will go and look at something else. That is the reason we chose to insert a delay in loading the web font and allow the page to load with the default fonts until such time as the web font is loaded and ready. At this time, given how things work, this is the best tradeoff we have. We are always looking at ways to improve things and this is something that we will keep working on.

The only workaround that may help would be the code that @pssethi listed in her original posting at top of this page.
pssethi · Member · Sep 4, 2015 at 2:14 pm
Copy link
Great to know. Thank you!

Even with the code I have in my custom CSS, there’s still a flash of the default font. If WordPress comes up with any new code that would fix the issue, please let me know.

Thank you again.
shaunadegruchy · Member · Sep 4, 2015 at 2:54 pm
Copy link
Thanks for the response. Where do I put the code? In the CSS place? Does it matter which line? And do I need to put in on every page or just paste it in once? Thank you!
thesacredpath · Member · Sep 4, 2015 at 7:18 pm
Copy link
@shaunadegruchy, go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the above custom CSS. If you have any problems, please let us know.

No items found.