Add or change Blogger Template's font by Custom Google Font

Blog user like different blogger template according to the template design, layout and latest features. But Font is an important part for making variation of blogger template. Because different style and size font change the blog's looks and experience. For example in 2 column blogger template with 1200px width we can use large font. But it 3 column template we should use comparatively small size font. Because using large font in small space won't suit the blog design. In addition, eye friendly font should select for readers thus they can easily read the content.  

However the problem will arise when viewers has not the same font that your blog containing font because it may not visible if font is not installed on viewers system. So the solution is to embed font file in blogger template. Suppose your template containing "Oswald" font file and which sets default as your template's font family. In this case if readers didn't installed "Oswald" font then no problem template will display "Oswald" font properly.

Those who wants to add or change older font with custom Google font then this is the perfect guidelines for them. Here we will learn how easily we can change our Blogger template's font to give it different looks.   

Using Google font is the best method to change the Blogger template's looks. For using any kinds of Google Font we have to use a default code like below-

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Main Google font link http://fonts.googleapis.com/css?family=Oswald. Here font family is "Oswald". We have set this as our template default Font. but the below code is condition for using any Google Font.

<link href='.....................' rel='stylesheet' type='text/css'/>

First we have to remove any previous custom Google font used as Font family. Secondly we have to select font from Font directory. And finally we will add the font in Blogger template.

Removing custom Google font used previously

For removing custom Google Font we have to find out the older font file. So just follow the below steps-

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code http://fonts.googleapis.com by Pressing Ctrl+F 

Step 4 After finding this kinds of code you would see the full code like below-

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

so delete the full code.

Note that if you don't find any code like above then you have to understand that your template is not containing any Google's custom Font file. So in this case skip this step. And directly proceed to the next step.

Selecting Custom Google Font from Font Directory

Currently Google Font directory included 651 Font Families. To see the sample of the Font visit the below link

• https://www.google.com/fonts

You can see the font by different tab like Word, Sentence, Paragraph and Poster style. This will help to understand how the custom font will look like. Suppose we will use Roboto font in our Blogger template. So under Roboto font box select Quick use icon.  and follow the below steps for customization:

Step 1 You will see first Choose the styles you want and from there tick the checkbox for adding all Font features. Remember that by ticking all loading time will increase. So it will be wise decision to put tick on selected features and style.

Step 2 Now Scroll Down and find the Add this code to your website here you will find your customize font code which can be used in Blogger template. It will automatically generate according to the selected style in Step 1.

After copying the font go through the next steps for adding our selected Custom "Roboto" Google font.  

<link href='http://fonts.googleapis.com/css?family=Roboto:900,500,100,300,700,100italic,400' rel='stylesheet' type='text/css'>

Integrate the fonts into Blogger Template

Finally it's time to integrate the custom Google font into our Blogger template. So for integrating the font just follow the below steps-

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code <head> by Pressing Ctrl+F

Note that we can add the font file anywhere between <head> ............  </head>

Step 4 After finding <head> paste the code as the first element that you have copied from Google Font Directory. After adding the code you have to declare the "Roboto" font as your font family thus The Google Fonts API will generate the necessary browser-specific CSS to use this font.

Step 5 Font (font-family: 'Roboto', sans-serif;) can be used as part by part in blogger template like below

• In outer-wrapper-

#outer-wrapper { font-family: 'Roboto', Arial, serif; font-weight: 400; }

• In template body-

body {

font-family: 'Roboto', sans-serif;

.............

.............

.............

}

• In first Header-

h1 { font-family: 'Roboto', Arial, serif; font-weight: 400; }

If you want to use same font in all part of the template then you can declare like below-

#outer-wrapper, #main-wrapper, #sidebar-wrapper, #content-wrapper, body, h1,h2,h3,h4,h5,h6 ,.post, .post-body,#footer-wrapper { font-family: 'Roboto', sans-serif;}

But remember that different designer define the blogging section differently. For example instead of #outer-wrapper maybe used #box-wrapper. Similarly instead of #footer-wrapper can be used #bottom-wrapper. So you have to find out the code and declare the section. If you become confused then simply individually declare in different part.

I have tried to define the whole tutorial with simply and easy steps. If you have any confusion regards this fell free to leave a comment below. Thank you.