What Are Custom Fonts & How to Use Google Custom Fonts in Your Blog

Add Beautiful Fonts in Blogger Blogs Using Google Fonts

Google has recently launched a new service which lets you easily use amazing fonts in any blog. These fonts are powered by JavaScript code which is hosted by Google so you don't have to worry about it. Currently, only 18 fonts are available but we can expect that number to grow. For example, this text is written in Lobster font. These fonts are search engine friendly and work in all browsers.

How to Add Google Fonts in Blogger Blogs


Google has made it really easy for anyone to embed a font in the blog. Just follow these steps:

1- Go to Google Font Directory.

2- Select a font from the list there, I'm using Lobster web font by Pablo Impallari.

3- On the next page, click Get the code link.

4- You'll see some code which looks something like this:

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

Note:
This is the code we need but when I copied and used this code in Blogger, an error occurred. To deal with the error, you have to close the link tag by adding /(slash) right before > in the above code and it would look something like this:

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

So, whichever font you use, just add a / before > in the code of that font. For now, copy the above code and go to your Blogger account.

5- Go to Design then Edit HTML tab and find </head>. After that, paste the step 4 code right before </head> tag. The result would look something like this:

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


After adding the code, save your template.

6- Now, we can use this font in headings and text. For example, if you want to use the web font in posts then use some code like this:

<span style="font-family: Lobster;">Any text here will be displayed by a web font like Lobster in this tutorial.</span>

How to Use Google Fonts in Posts/Sidebar/Header Headings?


You can also use the embedded web font in any heading of the blog. All templates have different structure that's why I can't write about each and every template. You can post your blog address in the comments and tell me in which part of the blog you want to use an embedded web font. I'll try to reply as soon as possible, thanks.

30 comments:

  1. I alrady use google fonts in one of my blogs check it out http://cocutzamisca-casasigradina.blogspot.com I choosed tangerine font-family and it looks pretty nice.

    ReplyDelete
  2. @ cocutzamisca, it looks really good.

    ReplyDelete
  3. http://redqueensynthesizers.blogspot.com

    How do I change the font for the post body, header, and sidebar?

    ReplyDelete
  4. @ aliespirituzomg, you're using Piano Black template converted by me to Blogger and you've removed the credit links which is really unethical. Please restore those credit links and then ask for help.

    ReplyDelete
  5. I'm sorry, I fixed it.

    I really want to change the font of my blog title and posts.

    ReplyDelete
  6. @ aliespirituzomg, go to Design then Edit HTML tab.

    For post body:

    find this code:

    .post .entry { clear:both; padding:15px 0 40px 0; line-height:160%; }

    and change it to:

    .post .entry { clear:both; padding:15px 0 40px 0; line-height:160%; font-family: Lobster, Arial; }

    For header:

    find this code:

    .header { float:left; display:inline; margin:64px 0 0 40px; }

    and change it to:

    .header { float:left; display:inline; margin:64px 0 0 40px; font-family: Lobster, Arial; }

    for sidebar:

    find this code:

    .sidebar { color:#aaa; margin:0 0 50px 32px; font-size:11px; width:270px; }

    and change it to:

    .sidebar { color:#aaa; margin:0 0 50px 32px; font-size:11px; width:270px; font-family: Lobster, Arial; }

    If you're adding some font other than Lobster, make sure to follow instructions in this article. And in that case, you'd also have to replace Lobster from the codes in this comment with the name of your desired font.

    ReplyDelete
  7. Hello,
    I would love to use Tangerine as my font for my blog Header and description. My address is:
    http://ayankeequilter.blogspot.com

    ReplyDelete
  8. @ Laurie, follow all of the above steps but in step 5 you have to use this code:

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

    After that, find this code:

    <Variable name="header.font" description="Title Font" type="font"
    default="normal normal 36px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>


    and replace it with this code:

    <Variable name="header.font" description="Title Font" type="font" default="normal normal 36px 'Tangerine', Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 36px 'Tangerine', Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

    Preview your blog and you'll see that blog title is now using Tangerine font. Anyways, now find the following code:

    .Header .description {
    font-size: 130%;
    }


    and replace it with this code:

    .Header .description {
    font-size: 130%;
    font-family: 'Tangerine', Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    }


    Now, both blog title and description are using Tangerine font and you can save your template.

    ReplyDelete
  9. Bilal - THANK YOU! It's lookin' good :) I just did the title with Tangerine and liked it that way! Now a follower!
    Laurie

    ReplyDelete
  10. @ Laurie, glad it worked for you. Feel free to add our link in your sidebar. See the bottom of this page for link adding instructions.

    ReplyDelete
  11. Just added your link down on the bottom of my page. Thanks again for your help :)

    ReplyDelete
  12. Thank you so much - your tutorials are extremely easy to follow and helpful. :)

    I love Blogger - but I can't understand why they don't offer more fonts in the new Template Designer. I also wish they'd separate the editing of the blog description from the page text.

    Thanks,
    Carol

    ReplyDelete
  13. @ Carol, changes come slowly but they definitely come.

    ReplyDelete
  14. Ok, I can't figure it out either, I want to use fonts for peas, pea alicia script. Its from the kevinandamanda.blogspot.com website. Could you help me?

    ReplyDelete
  15. How do I go about changing the top menu fonts (eg. home, about, reviews ...) as well as the blog post headings to Reenie Beanie from the google font directory.

    http://lostinstories.blogspot.com/

    Thanks :)

    ReplyDelete
  16. @ lost.in.stories, your templates uses JavaScript to generate menu so I've to install and test it myself. Please download your .xml file and mail it to me:

    levisinside0@gmail.com

    ReplyDelete
  17. Great post!

    LOL @ aliespirituzomg Sooooooooo busted!!

    ReplyDelete
  18. I am having trouble with the post date changing...how do i fix that?

    ReplyDelete
  19. @ Jeffrey, what kind of trouble are you talking about??? Do you want to change the post fonts to a custom font or something else??? Please explain along with your blog address!

    ReplyDelete
  20. Hi, I want to use the font "Saved by Grace" on my blog. How do I make sure all test on my blog is in this font?

    www.confessionsofasugaraholic.blogspot.com

    Thanks!

    ReplyDelete
  21. @ Cari, I can't find this font by search. Please gimme the URL of the website where it is available.

    ReplyDelete
  22. Hi, I've tried this but it didn't work. I don't know what's wrong. I want to use UNKEMPT for my blog and under the code for font, there's another code. What should I do?

    ReplyDelete
  23. @ Liyana, don't worry, just tell me where exactly you want to apply this font??? I mean in the blog heading, post heading, sidebar heading or where else?

    ReplyDelete
  24. I want to change it for my post title and the date

    ReplyDelete
  25. @ Liyana, just go to 'Template Designer' then 'Advanced' and you'll see the option to edit 'Post Title'. From there, you can apply Unkempt font on post titles. This is very easy. However, for date header, I'll write a tutorial very soon.

    ReplyDelete
  26. Ohh I didn't realize that before. Thanks! I thought that I have to put certain codes in order to change the font and stuff. I think you don't have to write any tutorial because font for date can be changed too :)

    ReplyDelete
  27. how to change the body text font ? i would like to use the coming soon font .
    help pls ?

    ReplyDelete
  28. @ nys.nessy, which template are you using???

    ReplyDelete
  29. very useful. the first tutorial that worked. thanks a lot!

    ReplyDelete
  30. Thx !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    ReplyDelete

Note: All comments will be moderated.