Ensure Text Remain Visible During Webfont Load in Blogger

Blogger Page Speed

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.

Ensure Text Remain Visible During webfont load.

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.

According to google
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

The font display API specifies how a font should be displayed. The 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.

Now put  &amp;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&amp;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.

How To Eliminate Render-Blocking Resources In Blogger.

How To Serve Images In WebP Format In Blogger

8 thoughts on “Ensure Text Remain Visible During Webfont Load in Blogger

  1. 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

    1. 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.

    1. Hi Syed,
      The problem can be solved by disabling google font, but in some blogger themes it can create problem.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.