How to Load Google Fonts Faster in Blogger
Have you ever encountered a website that makes you would like to leave instantly because of its loading problem? When that kind of reaction takes place on your site, you are going to lose your visitors. In the past years, there were three types of professionals who used to create a blog/website. No. 1 Web developer, 2. Web designer and No. 3 SEO analyst. But today, a web developer as well as web designer must know the basic SEO element to get started with web creation process. Google has stated that website speed is an essential aspect that they want webmasters to pay attention to. Website design plays a crucial role in increasing the site value.
In this era where website designing tactics are deeply related to its ranking, one should check out thoroughly whether his site is suitable for search engine algorithm or not. It has become vital for small businesses to develop a website to establish an online identity to gain the reputation and loyalty from readers.
Check out: Disabling The Harmful Scripts From Blogger
Many website elements make our blogs load slow. We usually use safe web fonts and font awesome to build a quality blogger template. But as we know both of them can force our visitors to leave your blog as they are responsible for our slow website speed. So, are you going to ignore those elements? No, but we can properly install them to reduce page loading time.
1. Use Fewer Typefaces
Are you using the number of Google fonts on each page? To optimize the google fonts, it's better to have just 2-3 typefaces – one for headlines, second for the article readability and third for displaying the sidebar widgets. The more typefaces you choose, the longer they will take to load.
2. Use Link Stylesheet Format
Google web fonts can be installed in 3 different ways – Google web fonts @import, rel='stylesheet and JavaScript. Using the rel='stylesheet allows you to place the code right after the <head> section and load it fastest before the CSS file.
<link href='//fonts.googleapis.com/css?family=Ubuntu:400,300,500,700' rel='stylesheet' type='text/css'/>
3. Kerning Google Typefaces
If you are using the more than one google typeface, then you should combine them in one rel='stylesheet' to avoid repeating the fonts.googleapis.com/css over and over. Here is the clear example of Google web fonts combination.
<link href='//fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600,700,800,900|Roboto:300,400,500,700,900|family=Open+Sans:400,600,700|Georgia:400,500,600|Oswald:400,500,600,700|Lobster:400' rel='stylesheet' type='text/css'/>
As you can see I have used the six web fonts without repeating the fonts.googleapis.com/css
4. Use Google Font Loader
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600,700,800,900|Roboto:300,400,500,700,900|family=Open+Sans:400,600,700|Georgia:400,500,600|Oswald:400,500,600,700|Lobster:400");loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
Using Typeface Loader in BlogSpot Blogger
- Login to your Blogger account
- Select your blog
- Navigate to Theme > Edit HTML
- You will see your theme editor and click inside it
- Press Ctrl + F to activate the theme editor search bar
- Search </head> and past the Code Loader right above the </head>
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600,700,800,900|Roboto:300,400,500,700,900|family=Open+Sans:400,600,700|Georgia:400,500,600|Oswald:400,500,600,700|Lobster:400");loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
Before you hit the Save button, replace the blue text with your typefaces and red text with your font weigh and finally click Save Theme. Now visit your blog and measure your blog loading time by using the website testing tool.
tHANKS FOR THIS...I USED IT OON MY SITE Goodiestech.com
ReplyDeleteI am happy you found it informative.
DeleteI tried this in my blog and works fine. Could i use this to my Google adsense code?
ReplyDeleteYes you can! But making any change in Adsense code is not allowed and your adsense account could get banned for violating the Google Adsense Guidelines.
DeletePlease give your blockquote source code. I want to implement in my blog. I really loved this blockquote style.
ReplyDeleteCheckout our blog source code and search for blockquote in css
Delete