How To Use Google Fonts In Blogger? Part-1

Read Part-2 here -> Style Post Titles and Sidebar titles With Google fonts in Blogger

Google Font-Previewer-Tricks 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" />

If you found anything unclear till now so please feel to post your question. The next part is more interesting so make sure you have subscribed to our Updates. Till then Take care! :)

Pin it

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 1/09/2011 blogger tricks , CSS and HTMLTricks

15 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

UnknownJan 9, 2011, 8:39:00 AM
Hmmmm..
Don't you think these are not web-safe fonts....???
Mohammad Mustafa AhmedzaiJan 9, 2011, 6:48:00 PM
@sam @Anjani

Web-safe fonts are those which are by default present in a users computer and therefore whatever browser you use the text style will look the same on any operating system. But for Google fonts we are embedding them so the user need not having these fonts on his computer. The fonts are installed on Google servers. So they work equally perfect. Designers today greatly use this technique on their projects. So it looks good and it works good. :>>
UnknownJan 9, 2011, 6:58:00 PM
@Mohammad
That's what I wanted to hear...

I will use them once I decide which to use...

Thank You :)
Samsexy98
Beben KobenJan 10, 2011, 12:49:00 AM
with the facility letter from google, we are the bloggers more facilitated without having to download the letter's into our computer windows system
thanks my friend :)
Lucky FlaushJan 11, 2011, 4:24:00 PM
Great job! Your site it looks better with periodic updates ;)
anjani kumar soniJan 12, 2011, 5:01:00 PM
hey Mohammad i want to know that how can i post comment with html tags.bcoz i want to help lucky flaush but when i paste all the code blogger said
your comment cannot be accepted :tag is not allowed :head

help me out
anjani kumar soniJan 12, 2011, 5:07:00 PM
@ lucky flaush

read this
http://demoanjanisoni.blogspot.com/2011/01/to-add-yahoo-media-player.html

the comment form is not accepting some tags so i am post it on test blog
hope its help you
have a happy life
Mohammad Mustafa AhmedzaiJan 12, 2011, 10:20:00 PM
@Lucky

thanks friend and I have kept this in mind. I have forgotten to credit you in the post above and I surely will in Part-2. Thanks for your valuable suggestions.

@Anjani
You need to encode them using this tool -> Encode HTML Characters
Mohammad Mustafa AhmedzaiJan 14, 2011, 10:24:00 PM
@Lucky
I still remember you customization of Tanzanite. And I really love the way you work on things. Please share me that tanzanite link, I would love to share it on Tanzanite post. :)

I am waiting to see on how you implement the fonts on your new template.
AmberMar 14, 2011, 11:16:00 PM
This weekend I installed one of the new fonts on my blog (since it's now native to Blogger). One problem - on some computers, it looks jagged and really ugly. I can't find a common denominator in terms of OS's and/or browsers. My home computer is on Win7/Firefox and it looks gorgeous. My laptop is also Win7/Firefox and it looks awful (also awful in IE). My husband's computer is on WinXP and it looks awful in Firefox, but not IE. Thoughts on how to smooth this out???
Mohammad Mustafa AhmedzaiMar 15, 2011, 3:43:00 AM
@Amber
You have highlighted some very important issues here. Many readers have complained regarding some problems on blogger forums. The only reason that comes to my mind can be the different screen resolutions that effect the font alignmnet. Since the fonts are not validated by World Wide Web Consortium (W3C) therefore they will not have same effects on different browsers and screen resolutions.
My advise is that use them the minimum possible and only between posts. Do not add them to your post titles or sidebar headers or blog header. This act is SEO friendly too. Normal text do play more important role then these embedded ones. Hope this helps buddy :)
Sunithi Selvaraj, RDApr 21, 2011, 7:32:00 AM
Just installed the fonts I wanted ... was so easy ! thanks !! But now how do i get to use them ?? Is that part 2 ??
Mohammad Mustafa AhmedzaiApr 22, 2011, 1:01:00 AM
@sunithi
I believe yes a part two will be posted. I apologies for the delay in posting due to exams. :>

@bloggertrix

Thanks :>
Chizoba OKAGBAMay 18, 2011, 2:36:00 PM
I have 2 questions!

I'm having problems with linking on my Blogspot blog. I just started.

To be more specific, I have a post on identifying fake Nokia phones. There, I mentioned Nokia C2-00 which I felt should have a link to its own page, but I didn't have an article on Nokia C2-00 yet. So, if later, I put together an article on Nokia C2-00, how do I now provide link to the Nokia C2-00 word which was mentioned in the old article about identifying fake Nokia phones without having to republish the old article?

When I experimented by puting up an article on Nokia C2-00 and trying to provide a link to the Nokia C2-00 word mentioned in a previous article, I was forced to republish the previous post for the change to be reflected.

Secondly, I write with font style Calibri, size 12. I found out that in some occasions, some words are not of size 12 after posting, they seem smaller. What do I do about this?

Thank you.
Mohammad Mustafa AhmedzaiMay 20, 2011, 3:22:00 PM
@Okagbabeluodachi

Dear whenever we have to make changed to previously published posts we have to republish it and there is nothing wrong with it. I edit, update old posts daily and I simply republish them with the new changes. Blogger will only make the new changes. The post will still have its old date and URL and it will remain where it actually was. Republishing also improves your search rankings.

For the font problem make sure you are viewing them in one browser either firefox or chrome because IE sucks. And I guess it should look the same size everytime. Please share your URL where you are adding these fonts.