Font changes as page loads
-
Hi, I have this annoying thing happening on my website (www.davisforestschool.org for reference) where the text first appears as the default font for the theme, and then after half a second it changes to the font I set up for the site. Is this just something that happens? Or is there some setting I am missing? Or some other way to fix it? I have another site on squarespace and this definitely does not happen there. Any help is appreciated! Thanks!
The blog I need help with is: (visible only to logged in users)
-
Hi there,
On slower connections, we display text in the theme’s default font first. This way, people can start reading your content before the custom font loads, instead of waiting while looking at a blank page. This might mean that there’s a flash of a different font before the page finishes loading, but we think overall this is better for folks on slower connections than seeing a blank screen.
-
Hi, thanks for your reply. Is the only way around this to switch back to the default font then?
-
Well, it’s only happening to folks with a slower or intermittent connection issues. You can test it on several different public wifi networks to see how it looks.
-
Well, it happens on my computer every single time I load a page, and I do not have a slow connection. Is it possible that something else is going on here?
-
I don’t see the reported issue on my computer.
Is it happening across more than one browser?
That theme is heavy on images so it won’t hurt to optimize those for loading speeds. https://en.support.wordpress.com/media/image-optimization/
-
Hi @davisforestschool, it’s unfortunately a well-known phenomenon. It’s called Flash of Unstyled Text, and it’s so common it’s got its own acronym. The text shows unstyled while the browser downloads a font.
The only current fix I’m aware of is to not display any text on the site until the font is loaded. On a very slow connection, that could lead folks to believe your site doesn’t actually have any content, so while some systems do that by default, we do not since we think content is pretty important.
There are ideas out there, but for now, if you have a CSS upgrade on your site, you can add lines to stop the text from displaying until it’s styled properly. If you don’t have a CSS upgrade, here are my recommendations to minimize the effect:
– Use the default body font if you can
– Use a logo for your site title and tagline (you can uncheck a box so they won’t show up twice on the site.)Hoping this helps :)
-
Even with a fast internet connection and up to date browser it’s visible, only for the blink of an eye, but it’s still there and it looks very unprofessional.
My website that I made as a teenager 20 years ago looked like this and regarding my skill level that time it was quite acceptable.
I don’t understand at all why WP is not taking care of this properly, we are paying for this, so we should at least have the option to activate font preloading. -
Thanks for the feedback; I’ll file a feature request.
For now, I recommend one of the options we listed earlier.
-
Oh, I did just notice you do have an upgrade that supports CSS. So, you can add this if you’d like:
.wf-loading body { visibility: hidden; }That will prevent any flashes.
-
Oh great, that does the trick! Thanks! I just wish this information was more readily available. Nothing like this came up when I searched the help documents. But thanks, I do appreciate it.
-
I also want to add, now without the font changing in the beginning, the pages appear to load much faster than they did before. So it seems to me that the font change might have been slowing things down. Wouldn’t it just make more sense all around to have this way be the default, rather than showing up with the old font first?
-
- The topic ‘Font changes as page loads’ is closed to new replies.
WordPress.com Forums 