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 of making a 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 a large font. But it 3 column template we should use comparatively small size font. Because using the large font in small space won't suit the blog design. In addition, the eye-friendly font should select for readers thus they can easily read the content.  

However, the problem will arise when viewers have not the same font that your blog containing font because it may not visible if the font is not installed on the viewer's 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 install "Oswald" font then no problem template will display "Oswald" font properly.

Those who want to add or change the 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 the font family is "Oswald". We have set this as our template default Font. but the below code is the 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 the font from the Font directory. And finally, we will add the font in Blogger template.

Removing custom Google font used previously

For removing custom Google The 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 kind of code you would see the full code like below-

&lt;link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/&gt;

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

• Visit the Custom Google Font Directory

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 a wise decision to put a 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 the 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 defines 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 a different part.

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