Saturday, 16 September 2017

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.

Blogger Template Opotimization

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

  1. Login to your Blogger account
  2. Select your blog
  3. Navigate to Theme > Edit HTML
  4. You will see your theme editor and click inside it
  5. Press Ctrl + F to activate the theme editor search bar
  6. 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.

Discover How to Grow Your Blog to 2k+ Visits /Day

Get Free Access

More From Knigulper

Comment Policy

Please Keep in mind that all comments are moderated manually & by default, all the links in comment area are set to nofollow. Using hyperlinks in comment is forbidden and such comments will not be published. Let's enjoy a spam-free conversation.

7 comments:

  1. I tried this in my blog and works fine. Could i use this to my Google adsense code?

    ReplyDelete
    Replies
    1. Yes 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.

      Delete
  2. Please give your blockquote source code. I want to implement in my blog. I really loved this blockquote style.

    ReplyDelete
    Replies
    1. Checkout our blog source code and search for blockquote in css

      Delete
  3. Hi, i absolutely got tons of value from your post. Please i have 2 quick questions.
    1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
    2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?
    Finally, would you spare a few seconds to check this site and offer me your candid advice http://www.samozoani.com

    ReplyDelete