Ensure text remain visible during webfont load in blogger. You may worry about your website’s loading speed. Upon checking your website in Google page speed tool you will find an opportunity to make your website’s loading speed fast that is, “ensure text remain visible during webfont load”. In this article I will tell you, what is the meaning of this opportunity and how to fix this issue.
WHAT is the MEANING of OPPORTUNITY “Ensure Text Remain Visible During Webfont Load”
Fonts are often large file that may take a moment to load fully. Especially when you are extracting the fonts from an external server like Google.
In this situation some browser won’t show any font for a moment and make a white flash.
The lighthouse can flag those URLs that may flash invisible text.
KNOW YOUR RESPONSIBLE LINKS.
Before fixing the issue first you need to know your responsible links. For this you need to audit your website in Google page speed tool, then go to “ensure text remain visible during webfont load” and copy the flagged codes. Now open your blogger’s theme.xml file in any html editor and search the codes which you copied from Google page speed tool. It may be google font API link or it may be maxcdn.bootstrap link.
HOW TO AVOID SHOWING INVISIBLE TEXT
The best way to avoid invisible text is to show system font until it load the external server’s fonts.
It can be done by including
font-display: swap in your @font-face style.Click here to know more.
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
font-display: swap;
}WHAT IT WILL DO
swap tag will tell the browser to show the text immediately by using the system font. It also tells to browser to replace the system font by custom fonts when they are ready to visible.HOW TO FIX THIS PROBLEM IN BLOGGER
FIXING THE GOOGLE FONT IN BLOGGER
Google made an announcement that google font can be controlled by using display query parameter.
Steps for doing this are as follows.
Note. Ensure backup your theme.xml file to avoid data loss.
Open your blogger’s theme.xml file in any html editor and search the Google font link like this.
<link href='http://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i' media='read' rel='stylesheet' type='text/css'/>Note. Your Google font API link may vary from above link but, don’t worry as the method is same for all type of Google font API links.
&display=swap tag just after the font type. See the updated code.<link href='http://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i&display=swap' media='read' rel='stylesheet' type='text/css'/>FIXING maxcdn.bootstrap LINKS
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>Note. Your maxcdn.bootstrap link may vary from the above link but, don’t worry as the method is same for all type of maxcdn.bootstrap links.
METHOD
Replace your maxcdn.bootstrap link by the following link and put it below the <body> tag.
<script src="https://kit.fontawesome.com/699d058cf1.js" crossorigin="anonymous"></script>It is advised to make your own font awesome kit by clicking here as so many installation of the above kit can create problem in your blogger.
That’s it.
woo, what an easy way.
If you found any problem regarding this or your responsible links are different from the described links, don’t hesitate to tell me by comment box. I will try my best to resolve the issue.
You can also tweet your problem on Twitter and tag us. We will help you personally and will embed your tweet here below the article. Our Twitter handle is @realtechandbio.
You may also like.
Ensure Text Remain Visible During Webfont Load In Blogger.
Hello sir ….
I don’t understand how I can replace maxcdn.bootstrap link.
The link in my case is https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css rel=’stylesheet’/>
Now How can I replace above code
hi, Sanjay
We have included a different topic for this problem in same post, that is “FIXING maxcdn.bootstrap LINKS”.
This will surely fix your problem.
let me know if another problem.
Thanks so much for this article! I found it extremely helpful. Best blogger tips
Welcome visitor,
Stick with us for more helpful content.
this just worked fine on my website I have completely disabled google fonts . LOL
Hi Syed,
The problem can be solved by disabling google font, but in some blogger themes it can create problem.
Thank you so much, Its really helpful
Welcome