How to Use Google Font Directory on Blogger

It’s a sweet escape from years stuck with same old fonts: Arial, Georgia, Verdana, Times New Roman as Google introduced their new service called the Google Font Directory together with Google Font API. Here we can forget the worries for web-safe fonts installed mostly on our computers, not to mention the SEO value in terms of rather using a website/blog banner but instead banner text.

“Web fonts” is a generic term that refers to the method of serving font files — the same type of files you have installed on your computer — to your website visitors so that you can guarantee they’ll have the appropriate type faces you want displayed on your web pages.

And to makes a clear and easy statement about the Google new “wonderful” service we’ve already implemented here in bloggergeeze, see our banner brought to you by Google Font Directory’s Reenie Beanie font face. On this post we’ll be discussing on how you can implement Google Font API on Blogger blogs. And sure you can do it, beginner or pro’s here’s is how.

On the Google Font Directory:
1. First go to Google Font Directory previewer, just go here.
2. Select the drop-down to select you’re desired font, the sample text will show how it will look likes (with 2 seconds delay, just wait), then accordingly you can play with other font features like the variant, size, shadow, transform, decoration and spacing.
3. After that you figure out how do you want the font to appear, you can also clear the sample text and put your free form text, i.e. BloggerGeeze.
4. Now you’re done with Google Font process, but don’t close it yet note of the generated source code below the screen we’ll now embed it on Blogger source code.

On Google Blogger HTML Editor:
1. First log on to your Blogger account.

2. Go to Design–>Edit HTML.

3. Now search for this code:
<b:skin><![CDATA[/*

4. Just before that paste the generated code link to the CSS:

Note that you may encounter some error here, because of the missing termination, just put a slash(/), see implementation below.


<!-- link for google font -->
<link href='//fonts.googleapis.com/css?family=Reenie+Beanie:regular' rel='stylesheet' type='text/css'/>

<b:skin><![CDATA[/*

5. Now search for the #header h1 { tag which normally used for the header title, then paste on it’s attributes, or may depends, (be warned that you should not clear all it’s CSS attributes, clear just the font formatting). 
See the implementation to BloggerGeeze.


#header h1 {
color: #70a600;
margin: 0;
padding: 15px 0 0 60px;
font-family: 'Reenie Beanie', serif;
font-size: 60px;
font-style: normal;
font-weight: 500;
text-shadow: 2px 2px 2px #000;
text-decoration: none;
text-transform: none;
letter-spacing: -0.05em;
word-spacing: -0.016em;
line-height: 0.9em;
}

6. Now save the template and preview it. You can still play for some adjustment on the coding like we did, with text-shadow and font-weight for example.

Testing bloggergeeze’s implementation on Chrome, Firefox, IE 8, and Opera, only IE 8 removed the applied shadow on the text while the rest shows the shadow effect.

Meanwhile, just let me know if you’ll be having any problem implementing it just drop a comment or contact me. If you can too, follow us on facebook and twitter, much appreciated if you can share this article.

3 Comments

  1. Yes google font directories is the latest google API. This API is available in website with comman GUI open source license that is gonna work for the entire process of font creation

  2. Great post! Thanks for sharing this tips, now I can use different font styles that I love.

  3. Thanks for giving such a useful informations.