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:
- Log in to
Blogger In DraftBlogger.com (opens in a new window). - Go to Design > Template Designer > Advanced.
- Select the type of text you’d like to change (e.g. Post Title, Page Text etc.).
- 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
|
|
|
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!"
nice info, thanks, but still draft mode hohoho...
@gamerap
Thanks
@Beben
It won't be long before they pass it to Blogger.
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
@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.
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.
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
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.
I just called over to thankyou for becoming a follower on my book review blog!
that's very nice . . .
@LindyLouMac
That's awfully nice of you :)
@Tips Diterima Adsense
Thanks for dropping by.
hmm..i will try later
@biskut
Welcome to Blogger Sentral :)
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
@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.
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????
@Carlos Alberto Andres
No, you can't post on static pages. That's just the way it is :(
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
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
Thanks for this useful information.
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!
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.