How To Properly Add Google Font To Blogger Without Affecting PageSpeed

Adding google fonts to a blogger blog the wrong and unoptimized way can drastically reduce your blog page loading speed which in turn will cause your SEO ranking to drop.

Today, I am going to show you the proper way to add any google font to your blogger BlogSpot blog without having an impact on the loading of your blog. The fonts are going to be loading just like every other CSS code.


Effect Of Slow Loading Fonts On Your Blog.

All fonts loaded externally are generally slow when being loaded especially when it shows up in the above fold (first visible section). Fonts act as external rendering blocking CSS and if not properly optimized, Google fonts will prevent your blog from loading properly.

Steps Required

1. Visit Google Font And Select A Font
2. Get the optimized code
3. Add it to blogger the right way
4. Enjoy a fast loading blog.

Selecting A Font

Visit www.fonts.google.com and select a font based on your choice but noting key factors such as readability and basic usage.

Step 1
Choose a font by clicking the “plus icon” attached to each font. You can select more than two at ones.

Step 2
Upon clicking, a dark colored box should show at the right bottom corner ( Family Selected), click on it to get the font details.

Get Optimized Font Code

Now you have options to Embed & Customize. Below this, you will find “STANDARD” and “@IMPORT”.

Step 1
Copy the link under the STANDARD section. The link is highlighted in the image above.

Example
“https://fonts.googleapis.com/css?family=Roboto”

Step 2
Paste and load it in your address bar. It is also shown in the image above. This will reveal the actual CSS code behind the google font your have select.

Using CTRL + A highlight and copy the entire code.

Add Google Fonts To Blogger The Right Way

All we needed was the actual CSS of the font. Now we have it. To add it to your blogger blog.

Go to Themes >> Edit HTML >> Using CTRL + F search for ]]></b:skin>

Paste the copied code above ]]></b:skin> as shown in the image.

What Next?
If you have previously added any google font to your blog, without using this procedure, you have to remove the codes and add it again using the above procedures.

How To Declare Google Fonts Using CSS.

After successfully adding the font script to your blog, it only requires a little knowledge of CSS when declaring the font. Assuming, I wanted to set the font on all blog items (e.g post body, headers, sidebar text etc).

All you need to do is add the below CSS above ]]></b:skin>

body {font-family: Roboto} – Depending on the name of the font you imported.

Essentials Features Of Google fonts.

There are certain features of a font that lets you customize it. The important ones are listed below

  1. Font Size (declared as font-size:16px;} –  Increase or reduce size
  2. Line Height (declared as line-height:1.8;) – Increase or reduce spaced between fonts horizontally.
  3. Font Color (declared as color:black;} – Changes the color of the font.
  4. Font Weight ( declared as font-weight:bold;} – Darken or lighten the text.

How To Verify If It Worked.

The best way to know if any font is acting as a rendering blocking CSS is by using Google PageSpeed Insights.

Visit https://developers.google.com/speed/pagespeed/insights/ add your blog URL and you should see what is affecting your blog loading speed. Fast blogs have higher SEO advantages over slow loading blog, it is recommended you speed up your blog.

More Topics On Increase Blogger Blog Loading Speed.

Related Articles

  • Enjoy Free Unlimited Browsing On MTN
  • Shine Free Responsive Blogger Template
  • Make Blogger Blog Fully Responsive And Mobile Friendly
  • Show Author Name, Date/Time, Comment Count Below Blogger Post Title
  • Increase Blogger Comments Avatar Resolution
  • How To Completely Remove Blogger Navbar And Attribution Widget
  • 7 Comments - Post Yours! How to? ▼

    1. this article is very nice and helpful thanks for it

    2. Oh great posts. Thanks a lot

    3. hi nice article keep it up good work..

    4. Hi Harsh

      Thanks for sharing good opinion and content. We always use to read your post. The content is always useful. Thanks for sharing good post. Keep on doing good work. Thanks

      Cheers

      Krishan Kargwal
      http://www.globalindiapassages.com

    5. Very useful and informative

    6. very nice article for me.

    Leave a Reply

    1 Shares
    Share1
    +1
    Tweet
    Pin
    Share
    Stumble