Issue: Ensure text remains visible during webfont load
-
Hi,
I am having an issues in performance test at pagespeed and other web performance testing tools. I am getting 0 or F for this following issue
Issue: Ensure text remains visible during webfont load
Details: Status:
Your page is not using font-display rule when loading the following web fonts.Font URL(s) :
https://www.bitcular.com/wp-content/themes/bitther/assets/css/fonts/font-themify/themify.woff
https://fonts.gstatic.com/s/poppins/v9/pxiEyp8kv8JHgFVrJJfecg.woff2
https://www.bitcular.com/wp-content/themes/bitther/assets/css/fonts/font-awesome/fontawesome-webfont.woff2
https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2
https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4.woff2
https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2
https://fonts.gstatic.com/s/poppins/v9/pxiEyp8kv8JHgFVrJJfecg.woff2How to fix:
To add the font-display property for Google Fonts, you can pass the desired value in the query string display parameter as shown in the example below:https://fonts.googleapis.com/css?display=swap&family=Roboto&display=swap
For fonts hosted locally, add the font-display property to the @font-face CSS rule as shown below:@font-face{
font-family: ‘myWebFont’;
font-display: swap;
src: url(‘myfont.woff2’) format(‘woff2’);
}
The font-display supports “auto | block | swap | fallback | optional” values. Try different values to achieve the desired result. You can read about the different values here.Additional notes
It’s not possible to change the @font-face CSS rule for web fonts hosted with most external services. You should confirm if there is a way to specify the font-display rule with your font hosting service.I would like to mention that i have selected swap as Font-display option. i Have tried to fix this but was not successful. Please help me to get rid of this error.
Thanks
The page I need help with: [log in to see the link]
- The topic ‘Issue: Ensure text remains visible during webfont load’ is closed to new replies.