Hi,
I have Typekit setup through the Theme Panel and it IS working.
However, I am seeing the FOUC before the type is rendered properly.
The entire site comes up in Times font, then flashes and switches over to the Typekit fonts.
How do I resolve this inside of Newspaper theme?
Let me know if you have any questions.
Here is my dev site: http://j.mp/1pOAqz0
Thanks,
Bert
As with all WordPress themes with “design panels,” there are default styles, and then option to “over-ride” that. The BEST way to use custom fonts, is to actually edit the style.css file to search/replace the font stacks you want to use then load the @fonts info in the actual style sheet vs loading additional “override” styles.
At least that’s what I do 🙂
Hi,
Also if you use the tagdiv speedbosster plugin this will be even more visible. This is the way css works. (‘cascading’). If you do not want to see this effect, change the default fonts from the style.css as Chris suggested.
Thanks.
Hi Bogdan,
I did go through style.css and changed the font stacks but its still giving me the fouc.
I’ve cleared cache, etc. and still see it.
I definitely want to address this issue. Would it be possible for you to take a look?
Let me know if you have any questions.
Thanks!
Hi,
Please send us an email at contact@tagdiv.com and provide wp-admin and a link to your site so we can access it. You could also provide ftp access in case we need to take a look at the files and please provide as many details as you can about the problem.
Thank you!
Hi Bogdan,
Thanks for the reply.
Information sent to the email address.
Standing by…
Thanks,
Bert
I have the same problem.
Please, how to solve ?
Thank you
Need to change the styles in your style.css and then put the CSS to load fonts from typekit or Google fonts AT TOP of your style sheet, and not load separate style sheet from another site; the ‘delay’ causes FOUT since it would otherwise hold up page load — if loaded via async in the queue.
Or, put the CSS for the fonts INLINE in your header.php …
all basic webdev stuff worth learning/trying 🙂
Hello Chris, I saw that you already answered this to the other colleague who wrote this topic. Thanks for the feedback, but this is totally unviable for me.
Having to change the css changing class by class will be extremely labor intensive, and in case my client needs to use the theme’s resources to change the site’s source via theme panel.
I would like to know how it was solved by the staff who developed the theme.
If necessary I can send data from ftp or admin.
Thank you.
Hello,
Sorry but there is nothing to solve. This happens regardless of theme. it is the way css works. THere is no fix to be implemented by us. Simply use the theme and css in it’s default way without changing anything and there will be no fouc. If you change colors, fonts, sizes, you will start to see changes happen especially if using a demo which already changes the css to provide the style and then the user changes it again so there are already 2 rewrites on the css happening. Then you activate speedbooster and mnove the loading of the stylesheet to the footer and that delays it even more making the fouc even more obvious. As Chris said, it is all basic knowledge every webdev should know as it does not happen in our theme specifically. This happens all over the web, not just WordPress either.
Thank you!
An alternate to using SpeedBooster, might be using the ‘scripts to footer’ plugin, which would only move scripts to footer, but not the main CSS. That way the timing is more ‘together’ for base settings and over-rides in the head.
On “sloooooow” connections, you might see the flash of font changes, but if you look at page source and the style css is loading in the head and then the over-rides, that’s about the best you can do.
If you have a modern web host, you *can* look into using https + http/2 — http/2 is the next generation way of serving pages where the entire page is packaged as *one* highly compressed element and served to browser, and not piecemeal.
Chris
Hello Bogdan,
Thank you for your feedback.
My question here is why does not this happen with Fonts from Google Fonts?
I would like to know if there is a way to resolve this, so I can continue to modify the fonts in the Theme Panel using Typekit.
If I modify fonts by Theme Panel using Fonts from Google Fonts, FOUC does not occur.
I have another theme (Jupiter – https://themeforest.net/item/jupiter-multipurpose-responsive-theme/5177775) that offers integration with Typekit and FOUC does not occur. Why does Newspaper occur? Would not it be something with the implementation?
Hello,
If you use custom fonts, the loading of the fonts is done locally and the default theme font loads first and then is changed to your own font. In this case to prevent the fouc, you will have to disable the default theme fonts or the google fonts altogether. There is a user submitted guide on how to do this here:
https://forum.tagdiv.com/topic/do-i-really-need-to-change-all-the-text-fields-for-fonts/
Hope it helps.
Thanks.
