page speed test problem font errors i am having problem in diffrent test i run if some one can explain how to get rid of them my website https://quranforkids.org i just tried a new template for my website after that it is giving me different errors most of the errors are for fonts and then i see that there is 1 background image from the theme but i do not know where it is or how to edit it as i tried in the editor but could not find that bg 
Hello @basicquran,
Thanks for writing in!
Please take a look at following resources for solutions related to the page speed error you are getting:
Ensure text remains visible during webfont load
Reduce server response times (TTFB)
Thanks.
i have worked my way through a lot of things and improved the web speed a lot
i am week on this only 
i am not a master at it is there a code that i can copy past in a CSS so this problem does not come, as it will help me a lot ao simple explanation would be good
Hi @basicquran,
Regarding that, “Ensure text remains visible during Webfont load” warning, please ignore that, for now, as we already added that to our issue tracker. And for FontAwesome that would actually show a flicker of those empty Unicode boxes if we force to it to show before the FontAwesome files load. You can read more details about that here.
Regarding that phantom background image, please navigate to Theme Options > Layout and Design, add a random image to the Background Pattern and Background Image, then just remove it immediately, this will get rid of that phantom background image.
I see that you’re using Autoptimize and W3 Total Cache plugins, We strongly advise to CLEAR and Deactivate those plugins, for now, caching plugins are best to enable when you’re done developing the site, or else you’re not going to see your edits immediately.
Hope it helps,
Cheers!
Hi i figured out all of that and i do activate the plugins to do all the editing and then purge and check the results i have been able to manage to up the speed quite well science I posted first.
The last post was just about the fonts things as Prasant gave me a guidance on it but can not figure it out let me show you the only problem that now i have is these 2 
both are mostly related to Fonts
1 is To" Ensure text remains visible during webfont load" if there is just a simple css code that i can copy past for it that would make my life easier
2nd also is Fonts Maximum critical path latency if you can see its also mainly the fonts like in combine 590ms
if you can suggest something or code simple enough to implement in css it would be great
do you know where I can find the Css for my theme x i have http://demo.theme.co/integrity-1/ on my website https://quranforkids.org because the path he gave is for pro
Hi @basicquran,
It should be at /wp-content/plugins/cornerstone/assets/dist/css/site/style.css.
Cheers!
I did it and it did not workout for me i still get the both are mostly related to Fonts 1 is To" Ensure text remains visible during webfont load and 2nd Maximum critical path latency ,
should i change the source url in css like the fonts are
over here https://quranforkids.org/wp-content/themes/x/framework/fonts/font_awesome/fa-solid-900.woff2
Hello @basicquran,
It is not advisable to edit the style.css of the parent theme. I would recommend that you install a child theme and then add this css code:
@font-face {
font-family: 'FontAwesome';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("../../../dist/fonts/fa-solid-900.eot");
src: url("../../../dist/fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../../../dist/fonts/fa-solid-900.woff2") format("woff2"), url("../../../dist/fonts/fa-solid-900.woff") format("woff"), url("../../../dist/fonts/fa-solid-900.ttf") format("truetype"), url("../../../dist/fonts/fa-solid-900.svg#fontawesome") format("svg")
}
@font-face {
font-family: 'FontAwesomeRegular';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../../../dist/fonts/fa-regular-400.eot");
src: url("../../../dist/fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../../../dist/fonts/fa-regular-400.woff2") format("woff2"), url("../../../dist/fonts/fa-regular-400.woff") format("woff"), url("../../../dist/fonts/fa-regular-400.ttf") format("truetype"), url("../../../dist/fonts/fa-regular-400.svg#fontawesome") format("svg")
}
@font-face {
font-family: 'FontAwesomeLight';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../../../dist/fonts/fa-light-300.eot");
src: url("../../../dist/fonts/fa-light-300.eot?#iefix") format("embedded-opentype"), url("../../../dist/fonts/fa-light-300.woff2") format("woff2"), url("../../../dist/fonts/fa-light-300.woff") format("woff"), url("../../../dist/fonts/fa-light-300.ttf") format("truetype"), url("../../../dist/fonts/fa-light-300.svg#fontawesome") format("svg")
}
@font-face {
font-family: 'FontAwesomePro';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("../../../dist/fonts/fa-solid-900.eot");
src: url("../../../dist/fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../../../dist/fonts/fa-solid-900.woff2") format("woff2"), url("../../../dist/fonts/fa-solid-900.woff") format("woff"), url("../../../dist/fonts/fa-solid-900.ttf") format("truetype"), url("../../../dist/fonts/fa-solid-900.svg#fontawesome") format("svg")
}
@font-face {
font-family: 'FontAwesomePro';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../../../dist/fonts/fa-regular-400.eot");
src: url("../../../dist/fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../../../dist/fonts/fa-regular-400.woff2") format("woff2"), url("../../../dist/fonts/fa-regular-400.woff") format("woff"), url("../../../dist/fonts/fa-regular-400.ttf") format("truetype"), url("../../../dist/fonts/fa-regular-400.svg#fontawesome") format("svg")
}
@font-face {
font-family: 'FontAwesomePro';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../../../dist/fonts/fa-light-300.eot");
src: url("../../../dist/fonts/fa-light-300.eot?#iefix") format("embedded-opentype"), url("../../../dist/fonts/fa-light-300.woff2") format("woff2"), url("../../../dist/fonts/fa-light-300.woff") format("woff"), url("../../../dist/fonts/fa-light-300.ttf") format("truetype"), url("../../../dist/fonts/fa-light-300.svg#fontawesome") format("svg")
}
@font-face {
font-family: 'FontAwesomeBrands';
font-style: normal;
font-weight: normal;
font-display: swap;
src: url("../../../dist/fonts/fa-brands-400.eot");
src: url("../../../dist/fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../../../dist/fonts/fa-brands-400.woff2") format("woff2"), url("../../../dist/fonts/fa-brands-400.woff") format("woff"), url("../../../dist/fonts/fa-brands-400.ttf") format("truetype"), url("../../../dist/fonts/fa-brands-400.svg#fontawesome") format("svg")
}
Please make sure to insert the absolute URL of the font files in the code above. By the way, you can get the child theme from here:
Hope this helps.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.