Jan 31, 2011

How To Use Custom Google Font on Customized Blogger Template?

On my previous post about More Fonts for Blogger Template, we can use this various fonts directly ONLY IF we use default template from Blogger Template Designer feature.

But most of Blogger user, use customized template so can not use this font directly. I'm sure you don't want to mess up your current blog design, but really want to change my fonts. This is step how to change fonts with Google fonts.



  1. Go to Google Font Directory, choose the font you may interested in. For this example, I choose Crafty Girls Font Family.
  2. Click on Use this font menu. To embed font into your web page copy the following code under every font. IMPORTANT NOTE : On Google font directory, the original code is <link href='http://fonts.googleapis.com/css?family=Crafty+Girls' rel='stylesheet' type='text/css'> , remember to add "/" character before closed tag, so the result code is <link href='http://fonts.googleapis.com/css?family=Crafty+Girls' rel='stylesheet' type='text/css'/>
  3. Open Dashboard > Design > Edit HTML, then paste copied modified code put before <b:skin><![CDATA[/* on EDIT HTML template menu.
  4. Simply use the font in your CSS font stack like any other font, for example, if you want to use it on Post Title, find h3 css code then insert the font family. For example : .post h3 { 'Crafty Girls', Arial, Verdana;} . Remember you can use this wherever you want, on sidebar title (find .h2) , on post body (find .post-body) etc
  5. Click Save template button

21 comments:

  1. the resourceful Gee! thanks for always sharing us useful information. i’m not sure to how this one..

    ReplyDelete
  2. why i can't click save template button?
    when i clicked it, there is no changes to my font..

    ReplyDelete
  3. There are many useful information here, good article, thanks for support

    ReplyDelete
  4. Hey! I just would like to give a huge two thumbs up for the great data you have here on this article. I'll be stopping by to your website for more soon.

    ReplyDelete
  5. Very interesting article I will bookmark you and return on a regular basis.

    ReplyDelete
  6. I was able to save it but no changes were made?

    ReplyDelete
  7. Hi, I'm so glad that I found you! :D
    But I'm a bit confused somewhere....

    1) Do I need to delete all of the default fonts to replace with my new font codes or I can just leave it?

    2) When I use ctrl+F to find, there are a few under the same highlighted 'H2' Do I need to paste new code on everyone of those highlighted?

    Tks so much!

    ReplyDelete
  8. Hi

    No need to delete default fonts, just put main font on the front
    For example : .post h3 { 'Crafty Girls', Arial, Verdana;}

    Where do you want to put the code? if you want to put on sidebar title, find .sidebar h2

    ReplyDelete
  9. Hi, tks so much for your reply! Greatly appreciated :)
    Actually I wanted to have 3 different fonts for the body, post title and sidebar title.. so in my case, how should I go about it? So that means I just need to add this CCS code for everyone of them?
    I'm getting more confused trying this out last whole nite! LOL
    Btw, as for the colors, can I change them too?
    So sorry for my so many questions... :(

    ReplyDelete
  10. Hi, so sorry to bother you again. I forgotten to ask you, why some downloaded templates do not have the Navbar in them and how do i go back to the dashboard from there? I always have to click 'back' or open another tab...

    ReplyDelete
  11. hi

    read this how to show navbar

    http://www.ipietoon.com/2009/08/how-to-show-blogger-navbar.html

    I dont really like the navbar :D so I hide it.

    ReplyDelete
  12. Oic, I got what you mean. For example of multiple fonts, view this blog http://beautyandmemyself.blogspot.com/

    Right click and view source code, you will find these code below

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

    Yes, you should add every font CSS link for every font you used.

    For example use Dancing Script font for h2 and use Cabin font for h3

    ReplyDelete
  13. Hi, tks so much for the link! :) I don't like it too so I hide it using the hover-effect for my current blog. So actually now I'm trying to set up the new template that I've downloaded.. :)
    Tks so much! :D

    ReplyDelete
  14. Hi, tks!! Greatly appreciated all your help! :)
    I'll go over and try to work it out now! :D
    *It's okay if the default fonts were deleted right? LOL
    coz I deleted them last night, replaced with my choice, it works just that for multiples, I'm confused.. :P
    Tks!!! ^.^

    ReplyDelete
  15. Came across your blog when I was searching bing I have found the bit of info that
    I found to be quite useful. You can visit my site about

    ReplyDelete
  16. Thank's for helping me with that custom font.

    ReplyDelete
  17. this is usefull for me.... thanks the advice.,.. i like ipietoon... :)

    ReplyDelete
  18. In the post has been define about the Custom Google font so that can be know that and able to understand regarding post. Mostly are very like it how to work in this blogger.

    ReplyDelete
  19. mbake yang cantik, aku meh tanya, pie carane ngedit navigasi menu, aku pake template mbak ebong yg Purple hello kitty, please jawab yo mbak, matur nuwun

    ReplyDelete
  20. Menu nya kalau ga salah pages, jadi add new pages saja nanti otomatis muncul

    ReplyDelete

Hi, thanks for visiting. You can leave your comment here

 

Ipietoon - Blog Design and Online Business Blogging Since 2008