How to use Google web fonts in blogger

There are millions of blogs on the internet,
competing with each other. But it you want
your blog to stand out and impress your
visitors, then you've to make some changes to
make your blog look different from others.
There are hundreds of elements that you can
make different from others and one of them is
your blogs font. Yes, you can make your blog
look professional by using custom fonts.
Okay, you made this decision, but now you've
to find a place where you can get free web
fonts. I think that the best place for fonts is
Google Web Fonts. Google Web Fonts inventory
is full of gorgeous fonts that are extremely
flexible and lightweight. There are over 600
fonts available in the Google Web Fonts. All of
the fonts hosted, there are free to use in any
commercial or personal projects.
Implementing Google Web Fonts in blogger is
extremely straightforward. So if you are
thinking to Add Google Web Fonts on your
Blogger blog, then you're at the right place.
Today we'll show you that How to Use Google
Web Fonts in Blogger.
First of all go to http://www.google.com/
fonts/ . There are over 600 fonts available in
the Google fonts. Okay now you've to choose
your desired font, you'll see all the fonts with
their previews and names. You can organize
them by their font size and preview text. You
can also sort them according to popularity,
date added, alphabet, trending and by number
of styles.
Once you've decided what font you want to
choose click Add to Collection button and
then click the Use button. It'll redirect you to
the next page. From that page choose you font
style i.e. light, normal or bold and scroll
down.
After that you'll see the link to sylesheet,
which would look like this:
<link href='http://fonts.googleapis.com/css?
family=FONTNAME' rel='stylesheet' type='text/
css'>
And its CSS style which would look like this:
font-family: 'FONTNAME';
Copy the stylesheet and go to Blogger.com >>
Log in to your Blogger Account >> Select a
Blog >> Template and click Edit HTML (Don't
forget to Backup your Template ). Click
inside the template code area, use Ctrl+F to
search and search for the <b:skin> tag. Just
above it paste your font stylesheet code.
Note: To prevent any error, add a forward
slash ( / ) before the closing bracket of the
stylesheet code. See the example below:
<link href='http://fonts.googleapis.com/
css?family=FONTNAME' rel='stylesheet'
type='text/css'>
The above is the stylesheet provided by
Google, before adding it to your blog add a
forward slash ( / ) before the closing bracket
like:
<link href='http://fonts.googleapis.com/
css?family=Oswald' rel='stylesheet'
type='text/css' />
Finally you've added the stylesheet. To use this
font on a specific part of your blog, you've to
add the CSS code to its element/code. Copy
the CSS code provided by Google and use it
where you want. See the example below:
.post-title {font-family: 'FONTNAME'; }
OR
.post-body {font-family: 'FONTNAME'; }
You can use this code anywhere in your blog,
just add the CSS to the element where you
want to use it. Click the Save Template
button and you're done.
The method will be difficult for newbies, but if
you follow the steps correctly, I don't think
that you'll find any difficulty. Share your
feedback and suggestions in the comments
section below. Do share this article with your
friends and don't forget to subscribe us!

Posted by Kaesy Nwosu on Thursday, October 23, 2014 - Rating: 4.5

Title : How to use Google web fonts in blogger
Description : There are millions of blogs on the internet, competing with each other. But it you want your blog to stand out and impress your visitors,...

Tweet