Illustratr theme keeps switching between default font and custom font
-
Hi,
I’ve just published a new wordpress with the use of the illustratr theme. I’ve chosen a different font than the default, but now when I navigate between pages, the default font will appear first and will then change in my chosen font.
How can I stop this flickering between fonts?Thank you so much for your help!
Kind regards, Ellen BlomThe blog I need help with is: (visible only to logged in users)
-
Hi Ellen,
I’ve noticed this behaviour on several themes last week when I was deciding which theme to change to on my own blog. The same thing happens on Firefox and Chrome browsers.
And agreed it doesn’t look very cool, looks like some kind of animation was intended, which obviously is not what you want!
In terms of a solution, I don’t have access to the WordPress.com code that they use to implement the Google fonts, so hard to say exactly why it’s behaving like that. Presumably it’s loading the CSS for theme first, then rendering the text, then applying the CSS for the custom Google font afterward. Or that Google fonts are being downloaded from Google, and there’s a delay in the browser receiving the fonts. So possibly changing how the CSS is loaded might help. All of this is beyond the scope of what I can help you with as a volunteer, I don’t have access to WordPress.com backend …
So, this would be a WordPress.com staff matter, probably a bug, so I’ve added a “modlook” tag to this thread and staff will respond as soon as they can.
Hope the staff can fix for you.
Cheers
Don Charisma
-
Hi @blogvanblom, usually you’ll only see the default font if you don’t have the other font saved in your cache. I’ll try to find out why it’s loading with every page and will write back here when I have more information.
-
I’m not using the Illustratr theme but I am having the same issue. I’m using the Nucleare theme.
It takes up to around 2 seconds for the correct font to load and it looks really bad.
I’ve got some custom CSS but nothing excessive – about 144 lines, I’m not using a preprocessor.
I can reproduce the issue in Chrome, Safari, and Opera. I am not having the problem with Firefox.
Here are my system and browser specs –
- Mid 2014 Macbook Pro running 10.10.5
- Chrome 45.0.2454.85 (64-bit)
- Safari 8.0.8 (10600.8.9)
- Opera 31.0.1889.174
- Firefox 40.0.3
- Firefox 42.0a2 (2015-09-10) (developer edition)
Also, here’s a short screen cast showing the problem.
For what it’s worth, I’ve been seeing this all week as well. I’m pretty certain I started seeing this issue around the same time that annoying Chrome bug popped up this week.
-
ps. – I just realized my profile links to my self hosted site – – my WordPress.com blog, the one that is having the problem, is at jimmysmutek.com
-
-
Okay, here we go: Regardless of whether a custom font is cached, the default font will display briefly while the page renders. If you have Custom CSS capabilities, you can force the browser to hide the text until it can render properly by using this snippet:
.wf-loading body { visibility: hidden; }Just note that can cause the page to load slower, since users have to wait til the font is available and working.
-
Thanks for that info supernovia!
I don’t see that as a acceptable resolution though, do you?
I’m experiencing page loads that are up to three seconds long. It’s pretty bad, regardless of whether I hide the load with a white screen or not.
2 weeks ago I wasn’t having these problems, and I haven’t had these problems for the last year that I’ve had my premium account.
What else is being done, and when can we expect a resolution?
Thanks so much!
-
Same problem with Pictorico theme my website http://www.jasonfeast.com
Only started doing this in the last week??? -
@supernovia from what you say, and the fact this isn’t an isolated case – it strikes me that the hiding text until it can be rendered should be the default setting for anyone who’s using “free” Google fonts, not an offer of a custom CSS solution on a $99 upgrade …
But obviously as stated before I don’t know all the factors at the backend, and don’t have a reason to test this myself, so just a suggestion.
Cheers
Don Charisma
-
it strikes me that the hiding text until it can be rendered should be the default setting for anyone who’s using “free” Google fonts
By default, we would like your users to be able to access your content. Even if they’re on a bad cell phone connection that wouldn’t be able to load the fancy font for a while. We want them to be able to read what you have to share. If they can’t see any content for 30+ seconds after pulling up the site on their connection, they may give up.
If you want to force them to wait for a font to load so they can see it as intended, the CSS trick will work. But again, there’s a compelling case for displaying a default font as needed.
I have let the developers know that more users are complaining / noticing / saying it takes a while to render, so if there’s a way for them to adjust the performance, they will take care of that.
-
@supernovia – thanks, obviously as the OP complained, the “animated” page that she’s ended up with looks totally awful for her site. Also whilst reviewing themes for my own theme change I noticed the behaviour and didn’t much like it.
However the addition of free Google fonts is great a much welcomed addition to WordPress. Hopefully there’s a solution here that suits everyone … I’m sure Matt is working tirelessly to resolve this as we speak !
Cheers
Don Charisma
-
We’re all working tirelessly to make WordPress.com the best platform it can be. I’ve been talking with developers about this, so thanks much for the feedback. Cheers all!
- The topic ‘Illustratr theme keeps switching between default font and custom font’ is closed to new replies.
WordPress.com Forums 