I have noticed that most of the time, when I open any post, the title of the post and other texts first load in their default fonts and after few miliseconds or seconds, it loads the fonts that we have defined for them using “theme fonts” option.
Now this is very simple thing but can it be avoided? I don’t remember any such experience with my old theme which were also supporting custom fonts.
What should I do to avoid this?
Thank you.
Hello,
This is mainly due to speedbooster and moving the render blocking css to footer. Css works in cascades. If you move the css to the footer, the theme will load the default style until it gets to the footer so it can apply the other styles as well. Please try to make speedbooster not move style.css to footer and check again.
Thank you!
But my speedbooster is deactivated this time ( as per system status) and I haven’t activated any Super Cache or cloudlfare at this time đ
Hi,
Are you sure speedbooster is not active as your page source says otherwise: http://screencast.com/t/dX0KjZhDp62O
That only appears if speedbooster is active.
We also recommend using a cache plugin (wp super cache) and optimize your website to reduce this delay time you see. https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Ftomatoheart.com%2F&tab=desktop
Aslso use gtmetrix as it’s a good alternative to google. Having multiple testing tools always helps.
This delay is present ion any site as css works by rewriting its rules over the previous and it will re-write every time the css gets changed. if your internet connection is slow or the page speed is not optimized fully, you can sometimes see this rewriting happen.
The only way to remove the delay altogether is to change the font directly in style.css by editing the code for the post title font: http://screencast.com/t/fgEWZiXyZB9
I hope this helps
Thank you!
If the system panel status is to be believed- My Speedbooster plugin is active : https://i.snag.gy/SO0ZFB.jpg
May be it still move some CSS file to the footer but you are in better position to say if this can happen.
Ye, we do use WP Super cache as well as CloudFlare for speed optimization but currently, I have deactivated both to see the live version of my site instantly because I am doing lots of customizations these days.
Do caching works for fonts? I mean I optimize my site using Super cache and CloudFlare. Will it preload these fonts so that visitors won’t be able to notice this re-writing from happening ?
About the method to change the font directly in style.css here: http://screencast.com/t/fgEWZiXyZB9 , do the arrowed place to change the font family will change the default font not just for the title ( H1) but also for H2, H3,H4,H5,H6 all right?
I have uploaded “BentonSans Cond Bold” font using theme font uploading option, putting it’s name under the mentioned place in style.css at http://screencast.com/t/fgEWZiXyZB9 will work? Do I need to search for the name of the font family of “BentonSans Cond Bold” or simply putting this name there will work?
Thank you for all your help.
Hi,
Caching and speed optimization will work to reduce the delaytime for the font change to happen but if a user has a slow internet connection he will still see this happen no matter the optimization you do. Caching and cden help in this matter, yes!
If you want to add the font directly in style css,if you change the value I popinted out, it will change all of the heading tags font, not just the h1. if you just want to affect the h1, you can add it below and remove it from that part like so:
http://screencast.com/t/fUCNokeh
Maybe this topic also helps: https://forum.tagdiv.com/topic/icon-library/ and
I found this example of benton sans:
/* #### Generated By: http://www.cufonfonts.com #### */
@font-face {
font-family: 'BentonSans-Regular';
font-style: normal;
font-weight: normal;
src: local('BentonSans-Regular'), url('BentonSans-Regular.woff') format('woff');
}
You could maybe adapt it to your version of the font.
I hope this helps.
Thanks.
Thank you very much for quick reponse. Let me work on it.
I hope I will be able to achive what I want.. if not, I hope you are there to help me further.
Thank you again.
Sorry one mistake in my second last comment:
If the system panel status is to be believed- My Speedbooster plugin is not active : https://i.snag.gy/SO0ZFB.jpg
Hi,
Yes I saw it is disabled because of a plugin, but on the page source it appears as enabled. You can test if it actually works using google’s page speed testing tool and see if the score changes if you have it enabled or disabled. You can follow this topic to make it compatible with other plugins if you want to (I don’t remember if I already gave you this solution): https://forum.tagdiv.com/topic/tinymce-advanced-and-other-various-disabling-speed-boster/ and test the fonts with it enabled or disabled to see if the fonts loading speed increases.
Thanks.
