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.

How To Properly Add Google Font To Blogger Without Affecting PageSpeed

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.

how to select google font

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

get font URL

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

Example
<link href=”https://fonts.googleapis.com/css?family=Roboto” rel=”stylesheet”>

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.

copy google font css

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.

add google font to blogspot

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.

using google font in blogger

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.

Turn Your Thoughts Into Reality

Sign up to receive free Blogger Tutorials For Beginners to start and grow your blogspot blog in 2019

One Response - Post Yours!

Leave a Reply

2 Shares
Tweet
Share2
Pin