How to Load Google Fonts Faster in Blogger

By -

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.

Comments

  1. Goodluck17 September 2017 at 05:26

    tHANKS FOR THIS...I USED IT OON MY SITE Goodiestech.com

    ReplyDelete
  2. Unknown21 September 2017 at 21:53

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

    ReplyDelete
    Replies
    1. Farooq Ahmad Bhat22 September 2017 at 02:50

      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
  3. Md. Alfaaz1 October 2017 at 08:05

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

    ReplyDelete
    Replies
    1. Farooq Ahmad Bhat6 July 2018 at 10:39

      Checkout our blog source code and search for blockquote in css

      Delete

Post a Comment

Popular posts from this blog

List of Top 11 Social Bookmarking Sites for 2018

By -
Image
Today, I'm going to share with you the most popular and widely used social bookmarking sites for 2018. These sites will help you increase your content visibility on social media and search engines. The process begins with the content curation and content aggregation. But before you bag the list, you need to understand what social bookmarking is and why you should use them instead of browser bookmarks. What is Social Bookmarking? Social Bookmarking is the process of adding, storing, submitting and sharing your contents on those websites where people and search engines can see and access your work actively. It includes a webpage, an image object, a video or text-based links like services or products that you offer. When you share (bookmark) your contents on a social bookmarking site, it means your data has been whitelisted or stored for quick access in future if the original web page exists. Check out: Role of Social Media in Boosting Your Traffic Easily Why You Should Use...
Read more

6 Digital Marketing Strategies for Small Business

By -
Image
Revenue is the lifeblood of any business. To get enough sales, it is very important to market your business as well as the products and services which you are providing. Today, there are millions of potential consumers on the Internet. Therefore, digital marketing is highly necessary. This is an activity where the company's name, brand, products, and services are spread throughout the Internet so that online consumers can view them, make purchases and possibly make referrals. By boosting your company's brand awareness online, you can create an attractive, positive and profitable business. One of the most effective methods of achieving this is by using SEO methods and other useful techniques. Here is more on Search Engineering Optimization. What is Search Engine Optimization? (SEO) This is a specialized strategy where the online visibility of a website is grown in the organic search engine results. Involving a collection of technical and web-based strategies, SEO optimizatio...
Read more

How to Create Separate AMP Pages On Blogger [AMP Plugin]

By -
Image
Today, I am going to share an awesome technique by which you can install AMP version on your responsive blogger template. By doing this, your responsive theme will not get disturbed because with this method, you can add AMP snippets to the mobile version (m=1) instead of upgrading your whole template to AMP. So let get started! As we know, people are upgrading their responsive themes to AMP themes and this method has badly impacted their blog layout. But in this article, we will be learning to create a separate AMP page in a native manner that will keep your responsive design up. So creating a separate AMP page on Blogger's mobile URL m=1, we need to have valid AMP snippets in our Blogger template. Then we will make some minor changes to make AMP on mobile URL m=1. How to Easily Add Hreflang Tag to Blogger Steps to Add AMP Pages On Blogger Mobile Redirect URL Creating a separate AMP page in Blogger is not a difficult task as you think. In today's article, I am going t...
Read more