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. Singapore web designFebruary 5, 2011 at 2:50 PM

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

    ReplyDelete
  2. LikaWebFebruary 13, 2011 at 6:27 AM

    Thanksssssss

    ReplyDelete
  3. AkMaFebruary 24, 2011 at 6:25 PM

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

    ReplyDelete
  4. stock forumFebruary 25, 2011 at 10:37 PM

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

    ReplyDelete
  5. thomas sabo australiaFebruary 28, 2011 at 1:34 PM

    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
  6. Office Desks Sunshine CoastMarch 13, 2011 at 9:31 AM

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

    ReplyDelete
  7. Miss BumbleMay 12, 2011 at 11:28 PM

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

    ReplyDelete
  8. Lyñ (My Little Messy N Cheeky)June 7, 2011 at 2:05 AM

    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
  9. adminJune 7, 2011 at 7:38 AM

    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
  10. Lyñ (My Little Messy N Cheeky)June 7, 2011 at 2:25 PM

    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
  11. Lyñ (My Little Messy N Cheeky)June 7, 2011 at 2:50 PM

    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
  12. Cebong IpietJune 7, 2011 at 3:26 PM

    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
  13. Cebong IpietJune 7, 2011 at 3:31 PM

    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
  14. Lyñ (My Little Messy N Cheeky)June 7, 2011 at 3:32 PM

    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
  15. Lyñ (My Little Messy N Cheeky)June 7, 2011 at 3:36 PM

    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
  16. buy thomas sabo charms onlineJuly 20, 2011 at 3:35 PM

    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
  17. LalaAugust 5, 2011 at 3:11 PM

    Thank's for helping me with that custom font.

    ReplyDelete
  18. Ban terbaik di Indonesia GT RadialDecember 4, 2011 at 8:36 PM

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

    ReplyDelete
  19. Server HostingJanuary 23, 2012 at 5:59 PM

    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
  20. Jeng DyahJune 28, 2012 at 3:40 PM

    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
  21. Cebong IpietJuly 2, 2012 at 10:40 AM

    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

Subscribe to: Post Comments (Atom)
 

Ipietoon - Blog Design and Online Business Blogging Since 2008