If
you are looking for free open-source fonts to design your blog’s texts
then nothing is better than Google web fonts. Blogger has been using
Google web fonts for quite a long time, you can find it by clicking the
Customize button found under Blogger Template tab of your blog.
But there aren’t many web fonts available to choose from as many as the
font directory has, isn’t it? Or you have a custom Blogger template where you want to add web fonts. Let’s start with
Merienda as our example font and see how we can add this to Blogger.
Step 1: After finding this font click on “Quick use”.
Step 2: You will be redirected to the next page where you have to choose the options for the font.
- Choose the styles you want
- Most of the time “Normal” works best and you need not to choose any
other font styles (if not required) as to reduce the page load time and
as also it can be done through CSS.
- Choose the character sets you want - Don’t select anything here as I will come to this later.
- Add this code to your website - Copy the code that you need to add to your template.
Step 3: Login to Blogger, go to
Template tab and click “Edit HTML”.
Step 4: Find
<head> and below it add the copied code as told in step 2.3 but here you have to also add a trailing slash (
/) as shown below.
<link href='http://fonts.googleapis.com/css?family=Merienda' rel='stylesheet' type='text/css' />
If the slash is not added at the end then you will get
XML error while saving your template.
Step 5: Now you have to integrate the font through CSS by adding it just before
]]></b:skin>. For example, if you want the web font for the whole page then add:
body {
font-family: 'Merienda', sans-serif;
}
Now suppose you want to integrate the web font for your post headings only then the code will be:
h3.post-title {
font-family: 'Merienda', sans-serif;
}
Or suppose you want this for the blockquotes only then it will be:
.post blockquote {
font-family: 'Merienda', sans-serif;
}
And if you want the web font to be italic then add the CSS property
font-style: italic; to the definition.
Step 6: If it’s done then save your template.
Important notes:
Loading Google Web Fonts Asynchronously
If you are an
advance user and developer then you can use the Google JavaScript
library instead of stylesheet link, also known as “
WebFont Loader”, to load web fonts asynchronously. Find
<head> within your Blogger template and simply add the below script.
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Merienda::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
It is also possible to call and add multiple web fonts. See the example below:
WebFontConfig = {
google: { families: [ 'Merienda', 'Droid+Sans' ] }
};
After this add the CSS as told in
step 5 to style your texts.
1- Click on Settings
1- Click on Settings
