How To Use/Add Custom Fonts In Blogger

Hello everyone,

We all know that blogger is one the best platform for blogging and number of people are using it. Also blogger is free to use, means day by day more and more people are joining it. And because of this competition is very tough now a days. In order to maintain your position or to make your blog even more popular and to get high traffic you have to customize your blog to attract more and more traffic. We know that customizing only is not enough to rank high on Google. There are many SEO related strategies, SEO-tools are available for getting high traffic and high ranking. But today in this post I am just going tell you about customization, and by customization I mean adding custom themes to your blogger, adding custom fonts to your blogger, adding different widgets like clickable image widget, page follow widget etc...

So, Let's talk about adding custom fonts in blogger.

When we write any post on blogger, by default there are only few fonts are available say 5-6 fonts like Arial, Georgia, Courier, Times, Helvetica etc... But what about other fonts? How we can use them? For that read the complete post and you will get complete idea.

Also see - Top Premium Looking Blogger Templates

Using / Adding Custom Fonts In Blogger

Step 1  -  Go this site...Google-Fonts... Here you can find hundreds of different fonts. Search for any fonts of your taste.

Step 2  -  Once you find font of your like, click on '⊕' icon on top right corner of the font.

Step 3  -  Once you click on that you will get black strip at bottom of your screen saying that '1 family selected'. Click on that strip.

Step 4  -  When you click on black strip, you will get windows like below image.

Now go to CUSTOMIZE section where you can select font style like regular, medium, bold etc... Do whatever you like.

Step 5  -  Now go to EMBED section and click on standard. Now you can see code for your font. Copy both code and css.

Now we have to apply this font in our blog post.

Note : we are going to apply this font for one particular blog post, means you have follow this process every time when you write new posts.

To Add Custom Fonts In Blogger Post

Step 1  -  go to blogger and click on new post.

(You can also do this for already written posts. Just click on edit post and follow this process)

Step 2  -  now write your post as usual without doing anything.

Step 3  -  once you done writing your post, click on HTML. Here you will see HTML code of your post.

Step 4  -  now copy HTML code of our font and paste it on top in HTML of post.

For example, HTML of my font is like...

------------------------------------
<link href="https://fonts.googleapis.com/css?family=EB+Garamond" rel="stylesheet">
------------------------------------

I pasted this code in my blog post as shown in below image.

Add </link> tags at end of above code like...

------------------------------------
<link href="https://fonts.googleapis.com/css?family=EB+Garamond" rel="stylesheet"></link>
------------------------------------

(Not necessary to do this because once you go back to compose mode it will automatically get added)

Step 5  -  Now copy below code....

-------------------------------------
<span style="your font family">
-------------------------------------

In my case my font family is...
-------------------------------------
font-family: 'EB Garamond', serif;
-------------------------------------

So my code will be like...
-------------------------------------
<span style="font-family: EB Garamond, serif;">
-------------------------------------
(remove comas around font name)

Add this code just above the start of your post content or text in HTML of your post.

Now at the end add closing tag </span> just above </div> tag.

See below image for more understanding...

Step 6  -  Now go back to compose mode and click on save and then click on publish. Your font is now changed successfully.

If you have any query then please do comment and let me know.

Enjoy...

Thank you...