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,

google-font-previewer 

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,

  1. Go To Blogger > Design > Edit HTML
  2. Backup your Blogger Templates
  3. Search for </head>
  4. 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    

image

<link  href="//fonts.googleapis.com/css?family=Fontdiner+Swanky:regular" 
rel="stylesheet" type="text/css" />

2.  Geo    

image

<link  href="//fonts.googleapis.com/css?family=Geo:regular" 
rel="stylesheet" type="text/css" />

 

3.  Homemade Apple

image

<link  href="//fonts.googleapis.com/css?family=Homemade+Apple:regular" 
rel="stylesheet" type="text/css" />

 

4.  UnifrakturCook

image

<link  href="//fonts.googleapis.com/css?family=UnifrakturCook:regular" 
rel="stylesheet" type="text/css" />

5.  Irish Growler

image

<link  href="//fonts.googleapis.com/css?family=Irish+Growler:regular" 
rel="stylesheet" type="text/css" />

 

6.  Orbitron

image

<link  href="//fonts.googleapis.com/css?family=Orbitron:regular" 
rel="stylesheet" type="text/css" />

 

7.  Permanent Marker

image

<link  href="//fonts.googleapis.com/css?family=Permanent+Marker:regular" 
rel="stylesheet" type="text/css" />

 

8.  Rock Salt

image

<link  href="//fonts.googleapis.com/css?family=Rock+Salt:regular" 
rel="stylesheet" type="text/css" />

 

9.  Slackey

image

<link  href="//fonts.googleapis.com/css?family=Slackey:regular" 
rel="stylesheet" type="text/css" />

 

10. Sniglet

image

<link  href="//fonts.googleapis.com/css?family=Sniglet:regular" 
rel="stylesheet" type="text/css" />

 

11. Tangerine

image

<link  href="//fonts.googleapis.com/css?family=Tangerine:regular" 
rel="stylesheet" type="text/css" />

 

12. Kenia

image

<link  href="//fonts.googleapis.com/css?family=Kenia:regular" 
rel="stylesheet" type="text/css" />

 

13. Kranky

image

<link  href="//fonts.googleapis.com/css?family=Kranky:regular" 
rel="stylesheet" type="text/css" />

 

14. Lobster

image

<link  href="//fonts.googleapis.com/css?family=Lobster:regular" 
rel="stylesheet" type="text/css" />

 

15. Luckiest Guy

image

<link  href="//fonts.googleapis.com/css?family=Luckiest+Guy:regular" 
rel="stylesheet" type="text/css" />

 

16. Mountains of Christmas

image

<link  href="//fonts.googleapis.com/css?family=Mountains+of+Christmas:regular" 
rel="stylesheet" type="text/css" />

 

 

17. IM Fell English SC

image

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

 

18. Allerta Stencil

image

<link  href="//fonts.googleapis.com/css?family=Allerta+Stencil:regular" 
rel="stylesheet" type="text/css" />

 

19. Cherry Cream Soda

image

<link  href="//fonts.googleapis.com/css?family=Cherry+Cream+Soda:regular" 
rel="stylesheet" type="text/css" />

 

20. Chewy

image

<link  href="//fonts.googleapis.com/css?family=Chewy:regular" 
rel="stylesheet" type="text/css" />

 

21. Coda

image

<link  href="//fonts.googleapis.com/css?family=Coda:regular" 
rel="stylesheet" type="text/css" />

 

22. Coming Soon

image

<link  href="//fonts.googleapis.com/css?family=Coming+Soon:regular" 
rel="stylesheet" type="text/css" />

 

  23. Covered By Your Grace

image

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

 

24. Droid Serif

image

<link  href="//fonts.googleapis.com/css?family=Droid+Serif:regular" 
rel="stylesheet" type="text/css" />

 

25. Corben

image

<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! :)

Need Quick Help within 24 Hours? ASK NOW



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 »

22 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Hmmmm..
    Don't you think these are not web-safe fonts....???

    ReplyDelete
  2. @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. :>>

    ReplyDelete
  3. @Mohammad
    That's what I wanted to hear...

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

    Thank You :)
    Samsexy98

    ReplyDelete
  4. 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 :)

    ReplyDelete
  5. Great job! Your site it looks better with periodic updates ;)

    ReplyDelete
  6. Psss... make a tutorial about implementing Yahoo music player in Blogger. Have fun!

    ReplyDelete
  7. 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

    ReplyDelete
  8. @ 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

    ReplyDelete
  9. @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

    ReplyDelete
  10. @anjani
    Thanks, but I know how to put the player. The idea was that this could be a good tutorial due to the fact that few made already a post with this subject. Thanks again.

    ReplyDelete
  11. @Mohammad
    I am working on a template with google fonts. These fonts are cool, but the problem is how to use them... there are so many. I will put a slider (from your site), yahoo player, social icons and lot features you provided here. when is finished I will announce here.
    Here is the template (workin' on it): http://bloggerromania.blogspot.com/

    ReplyDelete
  12. @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.

    ReplyDelete
  13. 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???

    ReplyDelete
  14. @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 :)

    ReplyDelete
  15. Just installed the fonts I wanted ... was so easy ! thanks !! But now how do i get to use them ?? Is that part 2 ??

    ReplyDelete
  16. Long post.thanks for share with us.

    http://www.bloggertrix.com/

    ReplyDelete
  17. @sunithi
    I believe yes a part two will be posted. I apologies for the delay in posting due to exams. :>

    @bloggertrix

    Thanks :>

    ReplyDelete
  18. 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.

    ReplyDelete
  19. @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.

    ReplyDelete
  20. I never knew that customizing fonts in Blogger would be possible. I would like to try this later and see what will happen.


    Network Management Software

    ReplyDelete