Use Google Custom Fonts In Blogger ~ Tech Boy Arena

Use Google Custom Fonts In Blogger

This tutorial shows you how to use Google custom fonts in blogger. Blogger only allows you to use only 7 fonts in default as you have seen in your blog post font option. But now you can also use Google custom fonts in Blogger blog post. For this follow the step-by-step procedure below.

Step 1. Take a back-up of your current template in case anything goes wrong.

Step 2. Go to Google Fonts Directory and select any stylish font of your choice which you want to use for your blog.

Step 3. Get the code of your font. For this first click on the font you like and then click on the "Get the Code" tab and copy your font code from there.

For this tutorial I am using Reenie Beanie font and its code looks something like this

Step 4. Add the Code to your Blogger template - Now you have to copy the Code they provide and you have to add the code to your blogger template, just after the "<head>" tag of your blogger template.

Important : Please add a Forward slash (“/“) before the the end of the tag (“>”) of this code. i.e, The above code should look like ;-

This is because blogger use XML for coding which won’t allow unclosed tags like this. So you have to close this tag by adding the forward slash.

Now Copy the code and paste it just after the "<head>" Tag.

Remember - It should be the first code after the "<head>" section. Otherwise it could cause problems while displaying the text in IE and may be in Firefox.

Step 5. Now Save the template.

Step 6 : Add the CSS code for Font to your Blog.

Now the last and final step. In this step, you have to specify where you want to add the font and have to add the css code for it. If you want to make the font appear for a specific sentence only in your blog post, then use the HTML code ;-

in the above code change

FontName : to the font name that you chosen it from google.

Your text : to any text you want.

If you want the font to appear for your

Blog titile
Post title
post body
sidebar fonts

you have to add the CSS code for it. Don’t worry, It’s very very easy.

Here I’ll tell you How you can change your post title. For this you have to search for the title css code

.post h3

.post-title h3

This is the common css code for post title in blogger. now we have to add the css code for the new fonts for this code,. For this, add/modify these lines below the above codes.

font-family: 'Your Font Name';

The code should look something like ;-

.post h3 {
font-family: 'Your Font Name';
}

Here I had added the css code for Reenie Beanie. You should post the css code between the “{” and “}” tags of .post h3. Like wise you can add the css code for other position too by modifying the css code.

Here i’ll mention the main positions and the common css code for each position. Please note that it may change if you are using any custom template.

Title : h1
Post title : .post h3 or .post-title
Post font : .post-body
Sidebar : .sidebar h2

the above tags helps you to change the font for any position of the above 4 tags.
for example, if you want to change the post font, in the above table, you can see that the tag to edit for the post font, is .post-body so you have to search for .post-body in your template, and below it, add the following line.

font-family: 'google Font Name';

The code should look something like ;-

.post-body {
font-family: 'Your Font Name';
}

These above values may change in some custom themes. But these are the common seen tags. If you didn’t find the tags with this, try searching similar tags.