Blogger adds 40 Google Web Fonts to Template Designer!

Update Jan 2011:
Blogger has since added more fonts, making the total of 77 web fonts!  It also made them accessible to all Blogger users,  instead of only to Blogger In Draft previously.

When it comes to font selection, the Web has always been limited to web-safe fonts. In other words, you are stuck with a few most commonly installed fonts such as Arial, Courier, Georgia, Impact, Times New Roman, Trebuchet and Verdana.

Web fonts provide a workaround to this limitation. They are kept online, on web servers, and as such they don’t have to be installed on every user’s computer. As long as you link the fonts to your page, everyone viewing your page will be able to see the fonts.

Google has it’s own set of web fonts, hosted on Google Font Directory. And I have even written a tutorial on applying Google Web Fonts.

Since then, it got better and easier. Blogger, via  Blogger in Draft has integrated Google Web Fonts into the Template Designer. There are now 40 exciting new (web) fonts in Blogger in Draft for you to choose from!  And according to Blogger in Draft blog, a lot more web fonts are coming.

To apply the new fonts, simply:

  1. Log in to Blogger In Draft Blogger.com (opens in a new window).
  2. Go to Design > Template Designer > Advanced.
    web fonts
  3. Select the type of text you’d like to change (e.g. Post Title, Page Text etc.).
  4. Pick your preferred font from the list.

Here is the full list of available fonts in Blogger in Draft:

Original fonts

Arial, Courier, Georgia, Impact, Times New Roman, Trebuchet and Verdana.

New Web fonts

  • Allerta
  • Allerta Stencil
  • Arimo
  • Arvo
  • Bentham
  • Calibri
  • Calligraffitti
  • Cambria
  • Cantarell
  • Cardo
  • Cherry Cream Soda
  • Chewy
  • Coming Soon
  • Consolas
  • Copse
  • Corsiva
  • Cousine
  • Covered By Your Grace
  • Crafty Girls
  • Crimson Text
  • Crushed
  • Cuprum
  • Droid Sans
  • Droid Sans Mono
  • Droid Serif
  • Fontdiner Swanky
  • GFS Didot
  • GFS Neohellenic
  • Geo
  • Gruppo
  • Hanuman
  • Homemade Apple
  • IM Fell DW Pica
  • IM Fell DW Pica SC
  • IM Fell Double Pica
  • IM Fell Double Pica SC
  • IM Fell English
  • IM Fell English SC
  • IM Fell French Canon
  • IM Fell French Canon SC
  • IM Fell Great Primer
  • IM Fell Great Primer SC
  • Inconsolata
  • Irish Growler
  • Josefin Sans
  • Josefin Slab
  • Just Another Hand
  • Kenia
  • Kranky
  • Lobster
  • Luckiest Guy
  • Merriweather
  • Molengo
  • Mountains of Christmas
  • Neucha
  • Neuton
  • Nobile
  • OFL Sorts Mill Goudy TT
  • Old Standard TT
  • PT Sans
  • PT Sans Caption
  • PT Sans Narrow
  • Permanent Marker
  • Philosopher
  • Puritan
  • Reenie Beanie
  • Rock Salt
  • Schoolbell,Slackey
  • Sunshiney
  • Syncopate
  • Tinos
  • UnifrakturMaguntia
  • Unkempt
  • Vollkorn
  • Walter Turncoat
  • Yanone Kaffeesatz

 

These web fonts are compatible with the following browsers:

  • Google Chrome: version 4.249.4+
  • Mozilla Firefox: version: 3.5+
  • Apple Safari: version 3.1+
  • Microsoft Internet Explorer: version 7+
  • Opera: version 10.5+

Note: From what I see, these web fonts will only work when applied via Template Designer. Applying them directly in the CSS (using font-family) won’t work, unless of course you use this method.

Enjoy!

21 comments to "Blogger adds 40 Google Web Fonts to Template Designer!"

Beben Koben December 3, 2010 at 11:18 PM    

nice info, thanks, but still draft mode hohoho...

Greenlava December 4, 2010 at 12:56 AM    

@gamerap
Thanks

@Beben
It won't be long before they pass it to Blogger.

e-kath December 5, 2010 at 5:50 AM    

Greenlave, hi, my question is unrelated to this post. I'm not on Facebook and don't know how to use it either, and in the interest of time, I'll write it out here with the hope that you don't mind. Perhaps you can direct me elsewhere?

I copied a modified and working version of Chan's Awesome HTML template into the template of an older blog. When attempting a Preview I got the following message.

Invalid variable declaration in page skin: URL is invalid. Input: url (http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png)

I didn't find reference to this part of the message online "Invalid variable declaration in page skin: URL is invalid."

Any ideas? Thanks for any consideration and time, e-kath

Greenlava December 5, 2010 at 5:58 PM    

@e-kath
This is the original (valid) variable declaration (taken from the original Awesome Inc. template) that uses the URL.

[Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url" default="none" value="url(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png)"/]

Use Ctrl+F to find the the URL in your template, then compare what you find with the above declaration.

e-kath December 5, 2010 at 11:32 PM    

Greenlava, thank you. This is what I've got in the template of the Awesome template I copied into the older blog template (works in the older one). I included the preceding and following lines of code as well.

..................default="none" value="none"/>



<Variable name="header.................


The two differences are 1) the "default" statement is on a third line compared to yours instead of at the end of the second line. 2: my url statement is http instead of http like yours.

e-kath December 6, 2010 at 1:44 AM    

Disregard my previous comment. Sorry about that.

1) below is what appears in my blog
2) below is what you said should be there

1)


2)
[Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url" default="none" value="url(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png)"/]

Two differences I noted are below. Would these account for the problem during preview when copying Chan's Awesome code into an older style blog?

-Before the word default: My code has a return and 7 or 8 spaces. Your code has one space.
-Your use of brackets at begin and end of code, instead of the greater and less than characters which were in my code.

Thanks again, Greenlava, e-kath

e-kath December 6, 2010 at 2:30 AM    

Greenlava,

In followup to my previous comment today 12/5.

Afraid though I was, I tried a correction... I backspaced the default="none" code up so that it was one space (with no return) after the type="url" code. And that was that.

The goal of seeing the preview at that point in my process was promising in terms of possibility of next steps. Thanks so much for your help.

LindyLouMac December 7, 2010 at 3:49 AM    

I just called over to thankyou for becoming a follower on my book review blog!

Tips Diterima Adsense December 7, 2010 at 7:32 AM    

that's very nice . . .

Greenlava December 7, 2010 at 4:35 PM    

@LindyLouMac
That's awfully nice of you :)

@Tips Diterima Adsense
Thanks for dropping by.

ghost December 8, 2010 at 12:28 PM    

hmm..i will try later

Greenlava December 8, 2010 at 9:24 PM    

@biskut
Welcome to Blogger Sentral :)

Abdul Basith December 10, 2010 at 2:32 AM    

blogger to introduce mobile template. at this morning i have seen that in beta version. i have taken screenshot. after some minutes its gone.

http://bloggernanban.blogspot.com/2010/12/mobile-template.html

Greenlava December 11, 2010 at 4:07 AM    

@Abdul Basith
Actually I've made a tutorial too. I was just about to publish it when the feature disappeared.
But I've manage to test it and found out one flaw -the template was only applied to homepage, other pages remain the same.

Carlos Alberto Andres December 11, 2010 at 5:30 AM    

Please!! Does anybody know how to post on different pages??
Everytime I post everything only goes to he main page... Is there a way to post on an especific page????

Greenlava December 11, 2010 at 9:05 PM    

@Carlos Alberto Andres
No, you can't post on static pages. That's just the way it is :(

chetaru September 13, 2011 at 3:44 PM    

Hi….
Thanks for sharing this information and resources ith us its really help full for me with the help of this we can improve our designs and development I really inspire with this information thanks

website designer October 7, 2011 at 3:14 PM    

It’s very good post! Congratulations! I really enjoyed to reading your blog. Thanks for share all this information. I’m looking forward your next post

Web Design Company October 10, 2011 at 2:20 PM    

Thanks for this useful information.

article critique October 17, 2011 at 3:09 PM    

I think I will choose a new font for my blog, because it seems that my font wasn't great for my current blog. Thanks for sharing this news!

Eagleyed April 25, 2012 at 6:07 PM    

i am pleased to read this post.. i have applied this to blog also.

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.