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-
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.
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-
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.
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.
Thanks for This post. but when I use your yellowish template and go my website with opera Android brouser its not show the text like h1 of post title. but in chorme its looks fine.
Hi There, If you are using Opera Mini then you will face some problem. Because Opera mini doesn't support many feature. This is just like Internet Explorer. Mot only my Blog you can try other Blog also that design with Jquery and Font Awesome, not support by Opera Mini.
^_^