{"id":391,"date":"2010-05-22T06:01:50","date_gmt":"2010-05-22T13:01:50","guid":{"rendered":"https:\/\/bloggeruser.com\/?p=391"},"modified":"2010-05-22T06:01:50","modified_gmt":"2010-05-22T13:01:50","slug":"make-blogger-template-look-better-with-google-font-api","status":"publish","type":"post","link":"https:\/\/bloggeruser.com\/make-blogger-template-look-better-with-google-font-api\/","title":{"rendered":"Make Blogger Template look better with Google\u2019s Font API"},"content":{"rendered":"
Looking to make your Blogger Templates<\/a> design better? <\/a>You no longer need to be designer now! With few lines of additional codes in your templates, you can change its look with smart fonts. Yes, I am talking about Google\u2019s Font API <\/strong><\/a>that will make the process of including non standard fonts in our blogger templates a lot easier. In this tutorial, I want to include details on how you can easily implement different fonts available from Google’s Font directory in your template to make it look beautiful and thus better.<\/p>\n <\/p>\n Table of Contents<\/p> Google\u2019s Font API<\/a> is simply a web font service that allows you to use the available fonts in its Google Font directory<\/a> for your designs and most importantly it is Open Source<\/a> and served by Google servers.<\/p>\n The fonts available in the Google Font directory<\/a> are all open source and you can quickly use them with simple clicks and codes. The below screenshot shows some fonts (till the time of writing this post) you can use for your templates or projects.<\/p>\n <\/a><\/p><\/blockquote>\n Well, if you learnt enough about the Google\u2019s Font API and now want to implement in your blogger template<\/a>, let\u2019s get started. <\/strong><\/p>\n <\/a> The Code for the Droid Sans will be<\/p>\n 3.\tNow see the below screenshot and copy the code you need to use for your Blogger Template.<\/strong><\/p>\n <\/a> <\/a> <\/a> 7.\tSave your Template.<\/strong><\/p>\n 8.\tOne more Step before you can start using it.<\/strong> The above steps added the CSS file to support the font. And now we need to define where we need to apply the font in our theme. In order to define where we need to apply that<\/strong>, we need to add some additional style statements to the section of our template.<\/p>\n Don\u2019t be confused! For example if I need to Use the Droid Serif font to my h3 title in my blog, then I would add the following line just beneath the closing tag \n9.\tNow after you have decided where to apply the font, just change the font-family name to the required font.<\/strong> 10.\tAnd once you have added that required CSS, you can preview to see it in action in your template. Try using different fonts and see which font suits your template better.<\/strong> Check the Below video from Net Tuts<\/a> that helps you learn the simple concept behind it and you can go through the steps again for the Blogger.<\/p>\nFirst, Google\u2019s Font API<\/span><\/h3>\n
Google Font Directory<\/span><\/h3>\n
Steps for Adding to your Blogger Template<\/span><\/h3>\n
\n1.\tGo to the Google’s Font Directory<\/a> and click on the font you want to use. For example in this tutorial, I have chosen the Droid Serif<\/a>.<\/p>\n
\n2.\tNow navigate to \u201cGet the Code\u201d button which is highlighted on your right.<\/strong><\/p>\n <link href='http:\/\/fonts.googleapis.com\/css?family=Droid+Sans' rel='stylesheet' type='text\/css'> <\/pre>\n
\n4.\tAfter you have copied this code, go to your Blogger Template you want to add this font to; and Navigate to the Edit Html Tab.<\/strong> See image below. (we are now going to edit your Blogger Template)<\/p>\n
\n5.\tSearch for the tag <head><\/code> in your Template and add the above copied code directly after it.<\/strong><\/p>\n
\n6.\tWait<\/strong> as blogger uses strict HTML markup and considers the original font embed code to be an open tag you also need to add forward slash (\/) just before the closing “>”<\/strong> symbol in your code, so that the code can be properly parsed and thus the code for Droid Serif<\/a> becomes<\/p>\n <link href='http:\/\/fonts.googleapis.com\/css?family=Droid+Sans' rel='stylesheet' type='text\/css'\/> <\/pre>\n
<\/b:skin><\/code> :<\/p>\n
h3.post-title {font-family: Cantarell, Sans=Serif;} <\/pre>\n
\nThe Following references and text areas to look for also can help you decide where you need to apply the font.<\/p>\n\n
\n Description<\/th>\n Reference<\/th>\n<\/tr>\n \n The header section (title and description)<\/td>\n #header<\/td>\n<\/tr>\n \n Blog title<\/td>\n h1<\/td>\n<\/tr>\n \n Post titles<\/td>\n .post-title<\/td>\n<\/tr>\n \n Body of blog posts<\/td>\n .post-body <\/td>\n<\/tr>\n \n Sidebar headings<\/td>\n #sidebar h2<\/td>\n<\/tr>\n \n Sidebar text<\/td>\n #sidebar .widget-content <\/td>\n<\/tr>\n \n Footer section<\/td>\n .footer<\/td>\n<\/tr>\n<\/table>\n
\n11.\tYou can finally save changes to your template if you like it.<\/strong><\/p>\nStill Found it Confusing ?<\/span><\/h3>\n