Adding Google Web fonts in blogger are now easy with the instruction that are being used in this post. Google provides a lot of free web services among which is Web fonts is another free service.
If you are using the default not custom blogger template, then you may know that you can add or change fonts in the template designer having 20 font styles.
Google offers up-to 500 web fonts to choose from with the verity of styles.
Compare to WordPress, Blogger has't that much added web fonts.
After observing web fonts at blogs, I came across everyone feel is different for web fonts. you may like some other may not. what you should do? Read a post or an article that using your liking font, if it is nicely to read then add to yours too.
Let's come to the point and add a web fonts to blogger.
I will take an example of Lora web fonts which is available at Google fonts. let's say you want to add it to your blog.
Then Go to Blogger Template editor and search for .Post h2 , you will see inside .Post h2 {} Font-family: style;
replace the style with the 'Lora', Serif; and you're done.
Let me Give you an example where I changed Font family.
Similarly if you want to change for h1,h3, and other HTML Tags then just replace the style that is next to Font-family with the 'Lora',Serif; and you're done.
If you are using the default not custom blogger template, then you may know that you can add or change fonts in the template designer having 20 font styles.
Google offers up-to 500 web fonts to choose from with the verity of styles.
Google say: Using many font styles can slow down your webpage, so only select the font styles that you actually need on your webpage.Choosing the best web fonts are more important for a blog than a website, because you required to captivate users once he start reading your post.
Compare to WordPress, Blogger has't that much added web fonts.
After observing web fonts at blogs, I came across everyone feel is different for web fonts. you may like some other may not. what you should do? Read a post or an article that using your liking font, if it is nicely to read then add to yours too.
Let's come to the point and add a web fonts to blogger.
I will take an example of Lora web fonts which is available at Google fonts. let's say you want to add it to your blog.
How to Add and install Google Web Fonts in Blogger
1. Visit Google web fonts. and you will see top fonts being used in websites and blogs, if you like one then click on Add to Collection , but for the purpose of this article, let's say I Like Lora fonts so you I will search the query at the Top-Left side that say 629 font families shown just above the text box and hit enter.
Click on Add to Collection and then at the bottom right side click on Use.
A Message will Pop that says You're almost done. Scroll down a bit and Copy the CSS code.
Paste the CSS One line of code Below <head> Section n your Blogger Template editor.
You have successfully installed Google Web Fonts in Blogger. Now we need to use it
How to Use Google Web Fonts in Blogger
It is pretty simple, what you have to do is to replace the font family code -where you want to change with the following.
font-family: 'Lora', serif;
Did't get? Let say you want to change the heading font family to Lora.Then Go to Blogger Template editor and search for .Post h2 , you will see inside .Post h2 {} Font-family: style;
replace the style with the 'Lora', Serif; and you're done.
Let me Give you an example where I changed Font family.
The Blue Underline code is the CSS styles of H2 Tag for blogger post and you see -next to font family is the style I've added.
Similarly if you want to change for h1,h3, and other HTML Tags then just replace the style that is next to Font-family with the 'Lora',Serif; and you're done.
![](https://lh4.googleusercontent.com/-Y658FaFU7GI/UB2OVklIBPI/AAAAAAAABM8/GFMnso_BP1M/h120/home_icon.png alt="Home" title="Go To Home" ){kind=icon}
Feel free to comment.
ReplyDeleteCongrts! Awesome article. Its very useful. Am waiting for your next post...
ReplyDeletehttp://www.meogle.org/2013/11/add-google-web-fonts-blogger-wordpress.html
Its my article on this same topic.