Using custom/nonstandard fonts with Google Web Fonts API

Let’s face it, the choice of fonts you can use in your blog or web page is rather limited. While you may have tons of fonts installed in your computer, that doesn’t mean you can use all of them. Well, technically you can apply them in your blog, but what your readers see is limited to only the fonts installed in their computers.

That is why Blogger plays it safe by integrating only (web-safe) fonts commonly available in most computers -Arial, Courier, Georgia, Impact, Times New Roman, Trebuchet and web fonts

Now that’s not much of a choice isn’t it?

Well that's about to change, with Google font API. What fonts your readers have or do not have in their computers no longer matters. The API uses fonts that are hosted by Google. This paragraph shows what it can do. Just so you know, I use a font called Reenie Beanie.

[Update Dec. 2010] Blogger has integrated Google web fonts into Template Designer.

Applying Google’s web font is easy: just add a special stylesheet link in your blog template HTML, then apply the font in a CSS stylesheet.

Here’s how you can apply the fonts to your blog:

  1. Go to Google font Directory for a list of available fonts.
  2. Click on a font to view the font details.
    • Go to Font Previewer if you want to test the effect of various text properties (font-size, spacing, caps, shadow etc.) on the font.
    google api custom font code
  3. To get the code, click blue Get the Code tab on the right.
  4. Tick the checkboxes for the variants (if the font has variants that is) you want to use before copying the code. The looks something like this:
    <link href='' rel='stylesheet' type='text/css'>
  5. Before using the code, add a slash right before the closing bracket, like this:
    <link href='' rel='stylesheet' type='text/css'/>
  6. Then copy the code and paste it right before the </head> tag in your template.
  7. To apply the font, go to Template > Edit HTML and insert a CSS rule right before ]]></b:skin> line in your template. The following CSS rule for example, will apply Reenie Beanie font to your post titles:
    .post-title { font-family: 'Reenie Beanie', verdana, arial !important;}

    (For Designer templates, you can also add CSS rules / code snippet via the Template Designer.)

  8. Preview before saving.

Only add the fonts you plan to use. Adding unused fonts would burden your blog with an unnecessary load.

At the time of writing this post, Google font Directory has 18 font families:
Cantarell, Cardo, Crimson Text, Droid Sans,Droid Sans Mono, Droid Serif, IM Fell, Inconsolata, Josefin Sans Std Light, Lobster, Molengo, Nobile, OFL Sorts Mill Goudy TT, Old Standard TT, Reenie Beanie, Tangerine, Vollkorn and Yanone Kaffeesatz.

Let us hope more fonts will be added in future.

To use custom fonts for short texts i.e. for headings, you can also use another method -create a image of the text, then embed it in your template HTML.


42 comments to "Using custom/nonstandard fonts with Google Web Fonts API"

Tej Kohli August 2, 2010 at 6:28 PM    

In How much language possible with this tools

Greenlava August 2, 2010 at 8:54 PM    

@Tej Kohli
I guess you need to check each font character set to find out.

Nina Nurziana August 5, 2010 at 9:50 PM    

thanks for the tips ;)

Greenlava August 6, 2010 at 1:23 AM    

@Nina Nurziana
Thank YOU for coming :)

H Y D E August 19, 2010 at 9:35 PM    

hi im try to use the Cantarell font.
the problem is i'm not understand the no. 7 part...

what CSS code i should copy & paste?

is it the "post-title { font-family: 'Reenie Beanie', verdana, arial;}"...? or i have to modify it?

and where i have to paste it? can u help me... (sorry, i'm new to this HTML thing)

Greenlava August 19, 2010 at 10:55 PM    

In your case the code should be like this:

.post-title { font-family: 'Cantarell', verdana, arial;}

the code will apply Cantarell font (as the first choice) to your post titles. If it can't find the font, verdana will take over...
Go to Design > Template Designer > Advanced > Add CSS and paste the code in the text box. Refer to Template Designer: Add style with custom CSS code snippet for details.

H Y D E August 20, 2010 at 12:28 AM    

still unsucessful bro...

already paste the code right before the head tag in design > edit HTML > edit template (that's your 5th step)..

then i opened template designer & go to Design > Template Designer > Advanced > Add CSS and paste the

.post-title { font-family: 'Cantarell', verdana, arial;}

and then i hit 'Enter' but nothing changed in preview i just hit APPLY TO BLOG & nothing changed also...any wrongdoing?

Greenlava August 20, 2010 at 3:01 AM    

@H Y D E
Try this one instead:
.post-title { font-family: 'Cantarell', verdana, arial !important;}

H Y D E August 20, 2010 at 3:36 AM    

it's successful finally bro! tq very much...

This font seems like worked on post titles only according to your CSS code snippet right..? Is theres any way that i can use this 'Cantarell' font for my entire blog's entry fonts?

Apologize if i'm asking too much ;)

Greenlava August 20, 2010 at 2:50 PM    

@H Y D E
Add the .post-body to the selector, like this:
.post-title, .post-body { font-family: 'Cantarell', verdana, arial !important;}

Asking is a part of learning :)

H Y D E August 20, 2010 at 10:08 PM    

million of thanks worked like a charm.. you are my beloved hero... :)

feel free to answer my question after this yah...

Callie August 22, 2010 at 1:16 AM    

what if you want to change to font on your pages tabs?

Greenlava August 22, 2010 at 1:29 AM    

@Callie and Tyler
Chande the selector to .PageList li a, like this:
.PageList li a {font-family: 'Reenie Beanie', verdana, arial !important;}

Callie August 22, 2010 at 1:40 AM    

Oh it worked! Thanks so much!

Callie August 22, 2010 at 1:55 AM    

Any ideas on how to make the font a bit bigger now? Its super small

Greenlava August 22, 2010 at 2:00 AM    

@Callie and Tyler
Add font-size, for example:
.PageList li a {font-family: 'Reenie Beanie', verdana, arial !important; font-size:40px;}

Callie August 22, 2010 at 2:12 AM    

I cannot thank you enough! I've been trying to figure this out for months. Thanks!

Nikki Lane September 1, 2010 at 11:12 PM    

Hey, your post has helped me so much already but I have a question. I got the post body text size bigger but how do I get the post title font bigger?

Greenlava September 2, 2010 at 12:20 AM    

@Nikki Lane
Add this before ]]>< /b:skin> in your template code:
.post h3 {font-size:PUT FONT SIZE HERE;}

Nikki Lane September 2, 2010 at 12:42 AM    

i tried it but it's still now working :( here's what I have:

.post-body { font-family: 'Josefin Sans Std Light', verdana, arial !important;font-size:16px}.post h3 {font-size:20;}]]>

am i doing something wrong?

Greenlava September 2, 2010 at 1:03 AM    

@Nikki Lane
font-size:20 --> font-size:20px

Nikki Lane September 2, 2010 at 9:34 PM    

ah! Thanks so much!!!

Anca Anton October 2, 2010 at 7:55 PM    

Thank you, your tutorial was the only one that made this work :-)

Greenlava October 3, 2010 at 12:33 AM    

@Anca Anton
My pleasure.
Please share by retweeting and/or Facebook sharing :)

7afid23lly November 25, 2010 at 9:27 PM    

Simple but yet enough details for beginners. AMAZING WORK!! Thank you GreenLava. Check it out, I am using the Reenie Beenie. but ermm how do i use it for my gadgets font?

Greenlava November 26, 2010 at 1:29 AM    

Looks like you've figured it out :)

Jithin December 10, 2010 at 8:28 PM    

How can i change my post body font like this?

Greenlava December 11, 2010 at 9:10 PM    

Apply the code to .post-body, for example:
.post-body { font-family: 'Reenie Beanie', verdana, arial !important;}

Rocio Esmeralda February 3, 2011 at 7:17 PM    

Hi Greenlava!
It me again =) with another question, How do I change the font from the entire blog to century gothic? Thanks for all you HELP!! =)

Greenlava February 4, 2011 at 10:15 AM    

@Rocio Esmeralda
Try adding this snippet:
body, body a {font-family:Century gothic !important;}

Rocio Esmeralda February 7, 2011 at 2:51 PM    

Hi I did what you told me and some font changed except the date.. thank you again

Greenlava February 7, 2011 at 3:55 PM    

@Rocio Esmeralda
Replace the previous snippet with this one:
body, body a, {font-family:Century gothic !important;}

H Y D E February 8, 2011 at 9:25 AM    

hi Greenlava.. what CSS code should I use if I want to change the gadgets font?

Greenlava February 9, 2011 at 9:23 AM    

@H Y D E
Add this:
.widget {font-family:PUT FONT NAME HERE;}

H Y D E February 9, 2011 at 10:35 PM    

thanks... seems that blogger has enabled lots of web fonts in Template Designer advanced settings. but whatever i love learning something from u. I'll be ask more. million of thanks :)

H Y D E April 23, 2011 at 1:32 AM    

hi again. it seems that when I use this CSS to change my blogs gadgets fonts to Bangers font:

.widget { font-family: 'Bangers', verdana, arial !important; }

it doesn't change the gadgets font to Bangers font, but it change all my blogs body & sidebar fonts to Bangers fonts instead. can u tell me what's wrong?

Greenlava April 23, 2011 at 8:44 PM    

@@H Y D E
That's because the blog body is actually a widget too (Blog widget). To isolate the sidebar widgets, try this:

.sidebar .widget { font-family: 'Bangers', verdana, arial !important; }

H Y D E April 24, 2011 at 2:19 AM    

ok. I understand one thing. but what I mean is that I want to change the gadgets font/tab or whatever they call in sidebar like 'Twitter', 'Labels', 'Blog Archieve', 'About Me' etc. Only the sidebar label. U can see it at the left side in my blog (red-coloured font)..

Sorry if i'm asking too much bro. It's harder to tell you about what I want with my limited knowledge :)

Greenlava April 24, 2011 at 1:21 PM    

@H Y D E
Those are sidebar widget titles. This code will target them specifically:

.sidebar h2 { font-family: Bangers, verdana, arial !important; }

Katie,  December 8, 2011 at 6:46 AM    

This is exactly what I've been looking for, thank you so much!

Lil January 21, 2013 at 2:29 AM    

Hello! I've gotten the font onto my blogspot, but I am unable to change the size of the font.
here is my html
-webkit-transition: 0.4s;
-moz-transition: 0.4s;

'Qwigley', cursive;
font-size: "20";
Could you help me out? Thank you (:

Greenlava January 21, 2013 at 2:51 AM    

You need a unit for the font size.
font-size: "20"; --> font-size: 20px;

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.