Have you visited to a site having so much fancy fonts, but your website has simple web safe fonts. Don't worry you can also have fonts like that in your blog or website.To do this you need little knowledge of HTML and CSS, one more thing you need is a Google Account.
Go to Google Web Fonts , on the homepage you will see hundreds of box of words with different fonts, these fonts are a demo to show how the font is. You will see categories of fonts like Sans Serif, Handwritting etc, choose any of the categories or maybe all categories.
Now the fonts will be showed in right pane,there will be 100s of fonts free for you, you can choose any font you like, there no limit, choose any number of fonts, all fonts are free and open source. Scroll up and down and if you like any fonts, see bottom right corner of that box, there will be an "Add to Collection", just click that and it will be added in your personal gallery.
Once you are finished adding all your favorite fonts in collection, then see how to use it. Google first requires you to link a Stylesheet File, in which all your collection's styles are defined, Google will itself give you the code.
In bottom pane on right top corner you will see Use button, click on it, on that page all the fonts will you showed which you added in your collection, if you want select, or deselect by check marking the fox followed by the font name.
After sorting out which fonts you want, scroll down there will be a codebox, where the link has been given. Copy that code, now go to your Blogger Dashboard >> Template >> Edit HTML , using your browser's search feature (CTRL+F {default}) , find "</head>" (without quotes) and paste the code you copied above the </head>, it should then look like this.
.styletext1
{
font-family: 'Bonbon' , cursive;
}
{
font-family: 'Bonbon' , cursive;
}
This piece of code will apply 'Bonbon' font on an element classed "styletext1". Below is the
example of above CSS style on an element classed "styletext1"
The above text is classed with "styletext1", and when we applied the above CSS code, it turned into the font-family we specified in CSS lines. The HTML code was this.
<span class="styletext1">"This is an example of applying font styles with CSS"</span>
Learn the HTML and CSS code closely. Now try this on your blog or website and then show us in comments.
Notes:
- Backup your template before trying this,it will be easy for you to get the old template, if you did any mistakes
- The HTML link code Google gave, will not work in XML templates (default templates for blogger)
- To make the link code work in XML template then please see our help section below.
- If, you don't understand what I am saying, then please check the video.
- Adding too much fonts will slow down your website or blog.
Help with issues
The only issue we found in this is the HTML code Google gives on Google web fonts page, which looks like this.
The problem often occurs with XML templates, by default blogger use XML templates for blogs, the main thing is that Google haven't already added the close tag, in HTML files, it will be accepted without any problem but in Blogger, you can to add a "/" before ">" in the code. After which the code will look like this.
<link href='http://fonts.googleapis.com/css?family=Bonbon|Herr+Von+Muellerhoff' rel='stylesheet' type='text/css'/>
Now Blogger template will happily accept it and you will be able to use as many fonts you wish to use.
