How to Load Google Fonts Faster In Blogger Template

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.

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.

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'/>

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

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>

How to Use the Typeface Loader

  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 C + 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.

Meet Our Blogger Community! JOIN NOW

Subcribe to Our Newsletter For Free

Subscribe Now

Recommended For You

2 comments: