How To Use Google Fonts In Blogger? Part-1 ~ GprsBay

Wednesday, June 15, 2011

How To Use Google Fonts In Blogger? Part-1

It is no wonder that web technology has developed tremendously over the recent years. Fonts that were once stored in user’s computers are now embedded in templates. Few years back you could use only those fonts in your templates which were available on major operating systems and in order to view those stylish fonts on your websites, the user should already had fonts installed on their PCs. Today you can use any font you like for your designing purposes and the reader doesn’t need having those fonts installed on his PC. Thanks to Google Fonts API you can now embed any font you like in your templates out of the popular fonts available at Google Font Directory.

Google Font Previewer Tricks

For making things as simple as possible I would first discuss in detail some important things about this excellent Font Previewer tool provided by Google itself. We will use this tool to produce our desired embeddable code and CSS code. For this reason I have divided this article in two parts. Part- 1 will let you know how to properly use Google Font Previewer and Part- 2 will involve the use of these fonts in different parts of your Blogger template so keep track of both parts.

This is how Google Font Previewer looks like,

As you can see that there is a Tools menu at your left and the display at right. You set the options to create your custom font. You can change everything through this tool except the color. Once you have set your preferred text you just need to copy the embedding code which appears below the display like this,

<link  href="//fonts.googleapis.com/css?family=Lobster:regular"

rel="stylesheet" type="text/css" >

This embedding code can be edited in many ways to make the text appear bold, regular or italic but when you have CSS then why bother disturbing the HTML? :)

and just below this code appears the CSS code which looks like this,

<style>
body {
  font-family: 'Lobster', serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  text-shadow: none;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0em;
  word-spacing: 0em;
  line-height: 1.2;
}
</style>

The blue part is what that will be used in Part- 2 of this tutorial. This CSS code is the most important part and even if you don’t use the Google Font Previewer you can easily customize the Custom Font using this CSS. Now how would you use these custom fonts in blogger? So create your custom Font with your preferred look and feel and keep the embeddable code and blue part for Part- 2.

How To Embed Google custom Fonts in Blogger?

The method is simple. Do this,

Go To Blogger > Design > Edit HTML
Backup your Blogger Templates
Search for </head>
Just above it paste the embeddable code that you copied from Font Previewer with one adjustment. By default the embeddable code ending tag is not closed and it looks like this,

<link  href="//fonts.googleapis.com/css?family=Lobster:regular"

rel="stylesheet" type="text/css" >

You must add a back slash at the end like this,

<link  href="//fonts.googleapis.com/css?family=Lobster:regular"

rel="stylesheet" type="text/css" />

You can add as many embeddable fonts as you wont. You just need to end each code with a closing tag.

Now how would you use this font in Blogger posts, titles, block quotes, sidebars, headers, footers and how would you further customize the font, all this will be shared in Part –2 so keep in touch. I have shared below the embeddable codes of some of the best fonts available which will be required in Part –2. The list below will help you use the best fonts for yourself and would save your time too. So here we go,

1. Fontdiner Swanky

<link  href="//fonts.googleapis.com/css?family=Fontdiner+Swanky:regular"

rel="stylesheet" type="text/css" />

2. Geo

<link  href="//fonts.googleapis.com/css?family=Geo:regular"

rel="stylesheet" type="text/css" />

3. Homemade Apple

<link  href="//fonts.googleapis.com/css?family=Homemade+Apple:regular"

rel="stylesheet" type="text/css" />

4. UnifrakturCook

<link  href="//fonts.googleapis.com/css?family=UnifrakturCook:regular"

rel="stylesheet" type="text/css" />

5. Irish Growler

<link  href="//fonts.googleapis.com/css?family=Irish+Growler:regular"

rel="stylesheet" type="text/css" />

6. Orbitron

<link  href="//fonts.googleapis.com/css?family=Orbitron:regular"

rel="stylesheet" type="text/css" />

7. Permanent Marker

<link  href="//fonts.googleapis.com/css?family=Permanent+Marker:regular"

rel="stylesheet" type="text/css" />

8. Rock Salt

<link  href="//fonts.googleapis.com/css?family=Rock+Salt:regular"

rel="stylesheet" type="text/css" />

9. Slackey

<link  href="//fonts.googleapis.com/css?family=Slackey:regular"

rel="stylesheet" type="text/css" />

10. Sniglet

<link  href="//fonts.googleapis.com/css?family=Sniglet:regular"

rel="stylesheet" type="text/css" />

11. Tangerine

<link  href="//fonts.googleapis.com/css?family=Tangerine:regular"

rel="stylesheet" type="text/css" />

12. Kenia

<link  href="//fonts.googleapis.com/css?family=Kenia:regular"

rel="stylesheet" type="text/css" />

13. Kranky

<link  href="//fonts.googleapis.com/css?family=Kranky:regular"

rel="stylesheet" type="text/css" />

14. Lobster

<link  href="//fonts.googleapis.com/css?family=Lobster:regular"

rel="stylesheet" type="text/css" />

15. Luckiest Guy

<link  href="//fonts.googleapis.com/css?family=Luckiest+Guy:regular"

rel="stylesheet" type="text/css" />

16. Mountains of Christmas

<link  href="//fonts.googleapis.com/css?family=Mountains+of+Christmas:regular"

rel="stylesheet" type="text/css" />

17. IM Fell English SC

<link  href="//fonts.googleapis.com/css?family=IM+Fell+English+SC:regular"

rel="stylesheet" type="text/css" />

18. Allerta Stencil

<link  href="//fonts.googleapis.com/css?family=Allerta+Stencil:regular"

rel="stylesheet" type="text/css" />

19. Cherry Cream Soda

<link  href="//fonts.googleapis.com/css?family=Cherry+Cream+Soda:regular"

rel="stylesheet" type="text/css" />

20. Chewy

<link  href="//fonts.googleapis.com/css?family=Chewy:regular"

rel="stylesheet" type="text/css" />

21. Coda

<link  href="//fonts.googleapis.com/css?family=Coda:regular"

rel="stylesheet" type="text/css" />

22. Coming Soon

<link  href="//fonts.googleapis.com/css?family=Coming+Soon:regular"

rel="stylesheet" type="text/css" />

23. Covered By Your Grace

<link  href="//fonts.googleapis.com/css?family=Covered+By+Your+Grace:regular"

rel="stylesheet" type="text/css" />

24. Droid Serif

<link  href="//fonts.googleapis.com/css?family=Droid+Serif:regular"

rel="stylesheet" type="text/css" />

25. Corben

<link  href="//fonts.googleapis.com/css?family=Corben:regular"

rel="stylesheet" type="text/css" />

1 Responses to “How To Use Google Fonts In Blogger? Part-1”

dinheiro said... January 24, 2016 at 4:24 PM great article, I'm really enjoying the google fonts

Wednesday, June 15, 2011