Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » How To Use Google Custom Fonts For Blogger.

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How To Use Google Custom Fonts For Blogger.

How To Use Google Custom Fonts For Blogger.

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

13,551 views

For years, Bloggers and web-designers were using those simple web fonts to style their blogs and templates. They didn’t had an option to change those fonts as there were only some fonts accepted world-wide as web fonts. It was impossible to use another fonts on web pages as they would appear in ten monitors in ten different styles ! Their appearance may change in  respect of the change in the OS, softwares … etc of that computers. So web-designers were trapped under those countable fonts…

But now Google has launched their new service Google web fonts with the slogan – ‘Making the Web Beautiful!’. This service will allow you to use custom fonts on google font directory on our blog/ websites without any sign-up or anything else. As it’s from ‘Google’, It doesn’t have any complications and it’s also completely free for commercial and private use.,No restrictions held or no harsh laws. This could make your blog look more stylish and is applicable for blogger blogs too. Don’t get amazed, It’s True ! I’ll show you how to do it with blogger.

Step 1 : Back-up Your blogger template

It’s always the first step for any blogger tutorial. I’ll be using this step as the first step for all my tutorials on allblogtools. You should always take a back-up of your blogger template before testing any hacks on blogger.

For this, go to Design or layout -> Edit HTML -> Download full template

Step 2 : Select your Font

For this, Go to Google Font directory and select any one of those stylish font, which you want to use on your blog.

How To Use Google Custom Fonts For  Blogger.

Step 3 : Get the Code for your Font

In this tutorial I’ll be using the Tangerine font, Which I liked the Most. For this just click on the name Tangerine and a new windows will open. Select The tab named ‘Get the code‘.

Step 4 : Add the Code to your Blogger template

Now you have to copy the Code they provide and you have to add the code to your blogger template, just after

<head>

tag of your blogger template.

The code may look something like;-

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

Important : ?Please add a Forward slash (“/“) before the the end of the tag (“>”) of this code. i.e, The above code should look like ;-

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

This is because blogger use XML for coding which won’t allow unclosed tags like this. So you have to close this tag by adding the forward slash.

Now Copy the code and paste it just after

<head>

. It should be the first code after the

<head>

section. Otherwise it could cause problems while displaying the text in IE and may be in Firefox.
Please remember to add the forward slash before the end tag. and now please click Save Template

now the code required for Google web font has been added to your blog. Now you have to can use google fonts in your blog by applying it on any widget tags.

Step 5 : Add the CSS code for Font to your Blog.

Now the last and final step. In this step, you have to specify where you want to add the font and have to add the css code for it.

If you want to make the font appear for a specific sentence only in your blog post, then use the HTML code ;-

<div style="font-family: 'FontName', serif;">Your text</div>

in the above code change

FontName : to the font name that you chosen it from google.

Your text : to any text you want.

If you want the font to appear for your

  • Blog titile
  • Post title
  • post body
  • sidebar fonts

you have to add the CSS code for it. Don’t worry, It’s very very easy.

Here I’ll tell you How you can change your post title. For this you have to search for the title css code

.post h3

or

.post-title h3

This is the common css code for post title in blogger. now we have to add the css code for the new fonts for this code,. For this, add/modify these lines below the above codes.

font-family: 'Your Font Name';

The code should look something like ;-

.post h3 {
font-family: 'Your Font Name';
}

Here I had added the css code for Tangerine. You should post the css code between the “{” and “}” tags of .post h3. Like wise you can add the css code for other position too by modifying the css code.

Here i’ll mention the main positions and the common css code for each position. Please note that it may change if you are using any custom template.

  • Title : h1
  • Post title : .post h3 or .post-title
  • Post font : .post-body
  • Sidebar : .sidebar h2

the above tags helps you to change the font for any position of the above 4 tags.
for example, if you want to change the post font,
in the above table, you can see that the tag to edit for the post font, is .post-body
so you have to search for .post-body in your template, and below it, add the following line.

font-family: 'google Font Name';

the final code should looks like

The code should look something like ;-

.post-body {
font-family: 'Your Font Name';
}

These above values may change in some custom themes. But these are the common seen tags. If you didn’t find the tags with this, try searching similar tags.

Demo

If you want a demo for this, try viewing the demo page of my new theme, I had changed it’s header into ‘Lobster’ and navabar and post body too to google fonts. have a look at it. click here to see a demo

I hopes that this tutorial was helpful for all of you. If you have any question regarding this, please feel free to ask them here, the comments page are open for it, isn’t it ? :)

Liked It ? Please Share

Comments

34 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. lelila says:

    great tutorial!

    what about if i want to use several fonts, should i just copy all the codes after the tag?

    also, can we change fonts for the quoted words? can you provide the codes? thanks

    • Rajeel says:

      Ya, you exactly have to paste the meta code for all the fonts you want to add one after another.

      To change the font of quoted words only, try editing in css under a section called “.post-body blockquote” or “.blockquote ” or something similar. Alternately use simple xml for it by posting the codes in tags

      Your Quoted text

      Added these too in the demo site, please check ti now

  2. Faer says:

    dude u r the MAN! Thx!

  3. Rajeel says:

    hi fear ,

    Thanks for your kind words. This is my first tutorial on allblogtools and i really liked this place. I’ll be here as a guest blogger and i hopes that i can help a lot of people under allblogtools ;)

    • Max says:

      hi rajeel,
      you are really Modest person, don’t say again that you are a guest blogger here, it’s your place dude, you are a part of allblogtools.com right now.

  4. Rajeel says:

    It’s really sweet to hear, isn’t it ? ;)

    btw, if anyone want to use it in WP, just check this post, forgot to add it in the post
    http://www.labofweb.com/how-to-use-stylish-google-web-fonts-for-wordpress-blogs-just-with-a-plug-in/

  5. This tutorials rocks. I really like the way you gave the step by step instructions. I will share this on Buzz and Twitter.
    Thanks!
    @Ileane

  6. khaled says:

    I really enjoyed your article,It has been extremely helpful,The information provided by you is very good,is very excellent.For that I need to say that I am very grateful to the information you share through your blog. good luck with you.

  7. bilquer says:

    Hmm… cool article, thanks for sharing : )

  8. Vy232 says:

    cool articel… it’s useful…

  9. Sumon says:

    Great Tips @ It’s really helpful for the all blogger. Thanks for this tips !

  10. Very useful, Thanks

  11. Lori says:

    Your Comment Here …. * I couldn’t get it to work!

  12. Alex says:

    Only a matter of time before this is all automated / font-selector added into Blogger dashboard

  13. Claudiu says:

    Wonderful tutorial, I recently started watching you closely

  14. cracksevens says:

    how to make the post’s text bigger?

  15. shawnte says:

    i’m not sure what i’m doing wrong. but it doesn’t work. i’m trying to change my post title, and i’m pasting the font-family code but nothing changes. step 5 is where i get confused. please help

    • Max says:

      You must use a custom template, any way it’s all automated now by blogger. you can use this feature directly from your blogger account.

  16. Martin says:

    What a great post. I overlooked this possibility till today. Many thanks for pointing this out. I’ll try that the next few days.

  17. Rizky Akbar says:

    still does not understand what it’s all about *

  18. nityananda says:

    Hi !

    Nice tutorial.

  19. sai yeshwanth says:

    I have added font but its not changing in all pages

  20. wow.. its great.. do you have same title tutorial for wordpress theme?

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here