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.
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.
2. Get the optimized code
3. Add it to blogger the right way
4. Enjoy a fast loading blog.
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.
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.
Using CTRL + A highlight and copy the entire code.
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.
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.
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.
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 Font2. 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".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.
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- Font Size (declared as font-size:16px;} - Increase or reduce size
- Line Height (declared as line-height:1.8;) - Increase or reduce spaced between fonts horizontally.
- Font Color (declared as color:black;} - Changes the color of the font.
- 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.
this article is very nice and helpful thanks for it
ReplyDelete