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