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

26 comments:

Singapore web design on February 5, 2011 2:50 PM said...

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

LikaWeb on February 13, 2011 6:27 AM said...

Thanksssssss

AkMa on February 24, 2011 6:25 PM said...

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

stock forum on February 25, 2011 10:37 PM said...

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

thomas sabo australia on February 28, 2011 1:34 PM said...

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.

Office Desks Sunshine Coast on March 13, 2011 9:31 AM said...

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

Miss Bumble on May 12, 2011 11:28 PM said...

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

ღᏓуռ էяɨռɨאღ on June 7, 2011 2:05 AM said...

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!

admin said...

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

ღᏓуռ էяɨռɨאღ on June 7, 2011 2:25 PM said...

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... :(

ღᏓуռ էяɨռɨאღ on June 7, 2011 2:50 PM said...

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...

Cebong Ipiet on June 7, 2011 3:26 PM said...

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.

Cebong Ipiet on June 7, 2011 3:31 PM said...

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

ღᏓуռ էяɨռɨאღ on June 7, 2011 3:32 PM said...

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

ღᏓуռ էяɨռɨאღ on June 7, 2011 3:36 PM said...

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!!! ^.^

Buy Viagra on July 18, 2011 10:44 PM said...

Thanks a lot for tips. I'll follow your indications step by step and I hope to achieve my aim and to modify it correctly. Thanks again buddy and have a nice day.

buy thomas sabo charms online on July 20, 2011 3:35 PM said...

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

Lala on August 5, 2011 3:11 PM said...

Thank's for helping me with that custom font.

tim on November 20, 2011 3:14 PM said...

Thereby, pandora bracelet australia even if deciding on a part of pandora australia related to pandora bracelets sale, youll be able to find the coloring plus somewhat every single one bead in accordance with unique loving. In the future, your lover contributed pandora bracelet beads a young adult, acquired a sign of adore, so that you can augment his pandora bracelet bride, memorial trinkets coming from a higher education holiday, a premium pandora beadsof Falcon. Got to the food so long as the eyes pandora charms and employ your current innovation and make your pandora jewelry current fashio

Online pharmacy reviews on November 26, 2011 1:05 AM said...

thanks I did not know it was possible to do that, I will try it right now on my personal blog and play with the different type of fonts!

Coach Factory Outlet on November 29, 2011 1:35 PM said...

Coach outlet online Leading American designer and maker of luxury lifestyle handbags and accessories.Large market in Europe and Canada,UK,USA etc.Welcome to Order!2011 New Style arrive,Free Shipping!

Ban terbaik di Indonesia GT Radial on December 4, 2011 8:36 PM said...

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

Coach Factory Outlet on December 7, 2011 10:18 AM said...

“Luxury, fashion and art are both expressions of emotion and passion; they search the

exceptional and give us an alternative view of the world. Art inspires fashion and luxury,

as luxury and fashion inspires art, Coach Factory Outlet."

Anonymous said...

We are Coach Outlet sick of you criticizing us and telling,that his main goal in Brussels was to,biggest crisis since the end of the cold war.

Server Hosting on January 23, 2012 5:59 PM said...

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.

Reanimator on January 28, 2012 12:45 AM said...

This post reminds me of other good articles. online doctorate degree | university degree | online university program | Online University

Post a Comment

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

Share

Widgets

 

Free Blogger Template, Blogger Widgets,Vector, Icon, Design Resources,Design Inspiration Copyright © 2012