There are many things we can do with our blog in order to make it look professional or something like that to catch attention of your blog's readers. Well, in this article we are going to guide little bit about font style and how to upload and use custom fonts in blogger. There are many websites available to download or use fonts on
blogspot blog or any of your website but not all those websites provide free service, to use their fonts style you may pay for it too. but let's talk about best place to find out all type of web fonts. What place is that ? It is Google, Google offers its own font service called "
Google Web Fonts" Which a best place to find out different styled fonts and use on your blogspot blog.
The best advantage of using google web fonts service is that it is a fast loading fonts because all these fonts are uploaded on Google's own server which fastest server than others. So, thus it won't effect your site / blog loading time.
Well, now let's talk about how to use Google Web Fonts in blogger, Go to Google Fonts library,
www.google.com/webfonts. There are 650 font families in the collection and they keep adding more, so that you may want to sort them.
To organize the fonts by style, you can use the menu on the left side. The top menu lets you to add and preview your own text using the 'Preview Text' field. From the same menu, you can pick the 'Size' and sort the fonts in 'Alphabetical order', by 'Date added', 'Number of styles' and 'Popularity':
When you have decided which font you would like to use on blogger, click 'Add to Collection' button and then hit the 'Use' tab. This will give you a
link to the style sheet found in the 'Standard' tab (point 3) and the
CSS style (point 4)
The link to style sheet would look like this:
<link href='http://fonts.googleapis.com/css?family=FONTNAME' rel='stylesheet' type='text/css'>
And the CSS style would look like this:
font-family: 'FONTNAME', cursive;
OK, now we will have to add style sheet to our blog first, so let's start. Go to your
blogger dashboard > Template > Edit HTML. Then press CTRL + F to enable search box and search for
<b:skin> tag.
Now, directly above the
<b:skin> tag, Paste that style sheet which provided by Google web fonts. To prevent any errors, add a forward slash (/) right before the closing angle bracket (>), like this:
<link href='http://fonts.googleapis.com/css?family=FONTNAME' rel='stylesheet' type='text/css' />
Now, search again any part of your blog, where you want this fonts to be applied. For example, if I would want to add the "Rancho" font to the posts and comments titles, I will paste the CSS style like this:
h3.post-title, .comments h4 {
font-family: 'Rancho', cursive;
font-size: 28px;
}
Where "h3.post-title, .comments h4 {" is the class selector for the post and comments titles. Note: to change the size of your font, add the "font-size: 28px;" part as well, and change the "28px" value to make the font bigger/smaller.
Also see : How to Add CSS Code in Blogger Template
Finally, save your template and you're done !
Drop your comments and questions below.