Controlling FOUT – flash of unstyled text
-
I’m having FOUT issues again. Early last year someone helped me with some code to control it, but I’ve changed themes since then. I hate FOUT and would prefer a briefly blank screen to having the wrong fonts show. Could someone help me with the code to control FOUT with my current theme? Thanks!
The blog I need help with is: (visible only to logged in users)
-
Hi there,
Can you please provide a bit more detail about this? Which specific font selections aren’t being loaded right away, and in which browser(s) and browser version(s) are you seeing it? I’m not immediately seeing any FOUT on your site, so if you can help me narrow down where to look, that’d better let me know how to help. :)
-
On occasion when I open a page on the blog (using Chrome Version 36.0.1985.125 on a MacBook Pro), the headlines will flash in the default font before the new font loads. (It may be happening to the body type too; I haven’t noticed.) One time it wasn’t just a flash; the default font showed and the Typekit font didn’t load at all — until I reloaded the page. It reminded me of some of the times when I’m viewing a page with the WP customizer open and the default fonts show instead of the ones specified in the customizer. FOUT may not be the correct way to describe what is happening; it occurs only occasionally.
-
I see. Unfortunately, as far as I know, there isn’t any way to eliminate this. There are essentially two options when it comes to loading sites: don’t load anything at all until the browser loads all the elements, or load the fastest things first. Most of the time these days, the second option is used, so you get something on the page and don’t have to stare at a blank white screen.
The browser loads the default fonts very quickly; how fast it loads the premium fonts depends on your connection speed. The only way to avoid this entirely is to use only default fonts that most browsers already have loaded – Verdana, Georgia, etc.
-
I’d prefer to hide the default fonts and have a blank space for a second before the Typekit fonts load. Could you tell me the CSS that would make this happen on my blog? I had it once upon a time but cannot find it now. If it’s not a FOUT problem, the code won’t help. But at least I’ll have eliminated that possibility.
-
I didn’t know, but I searched and found the thread discussing this last time you had the issue:
https://en.forums.wordpress.com/topic/keep-default-font-from-showing-before-typekit-font?replies=9This was interesting information, and good to know! Glad you brought it up again. :)
It looks like you need to remove .wf-active from your custom CSS and use the class .wf-loading to apply ‘visability: hidden’ to each font that’s loading default fonts initially.
-
Thanks for your help. I’ll have to digest all that again to understand what to do, but if I figured it out once, I should be able to do it again.
-
@windwhistle, if you are still having issues with this, please post another thread on it and I will be glad to lend a hand.
-
@thesacredpath Hi there! Good to see you again. No, I haven’t noticed the problem lately. It got buried during the Beep Beep Boop uproar or something. Let’s just call it resolved for now.
-
Alright, and if it comes around again, or if you need anything further, you know where we are. :)
-
- The topic ‘Controlling FOUT – flash of unstyled text’ is closed to new replies.
WordPress.com Forums 