How to change font and font Size of your Post content and Title for blogger

0
231
Alexas_Fotos / Pixabay

How to change font Size of your Post content for blogger?

Now a days blogging is the biggest second level or first level income for the professional blogger. If you chose blogging as your own business, visitors are the main backbone of your blogging business. they have to get great experience from your blog articles. To attract your blog articles font size is the important criteria. Bad font size creates negative impression about your blog.

Alexas_Fotos / Pixabay

I asked One of the biggest theme provider, but they said to get custom font you have to pay $ 25 for one time. But do you know! the theme cost is only $9.99. I asked myself why we cannot change the theme post content font by our self.




I searched in google and read so many articles, almost 90% of the content is available for worpress, Nothing I was found. So that, I decided “Do or Die”; let we try in edit HTML. Finally, I got found how to change font size of your post content for blogger.

One ultimate theory you must know “Fonts Represent Your Content”

In two methods you can be changed font of your post content:

  1. Add CSS method
  2. Edit HTML method

Let’s see How to change font Size of your Post content for blogger,

Add CSS method:

  1. Login to your blogger dashboard => theme => go to customize
  2. See left corner advanced setting click it.
  3. See Add CSS
  4. Past the below mentioned code
  5. Apply to your blog.
  6. That all you have done it
  7. But before that you have to change your desire font and its size (green marked).

Code :

.post-body

{

width:100%;

margin-bottom:15px;

font-family:’Calibri‘, sans-serif;

font-size:20px;

line-height:1.3em;

color:blue;

font-weight:400

}




Note: Red color marked for your desire font change.

Changed content font:

Change font size of your post content for blogger using edit HTML method:

In this you have some coding search knowledge…

  1. Login to your Blogger dashboard
  2. Go to theme => edit HTML
  3. Press Control + F
  4. Search below code in your HTML code

 

.post-body

{

width:100%;

margin-bottom:15px;

font-family:’Calibri’, sans-serif;

font-size:20px;

line-height:1.3em;

font-weight:400

}

This is the main code for your post content

Here font-family: ‘calibri’ mentions your content will be shown in Calibri font for your visitors, here you can paste any font name instead of Calibri. Also font-size: 20px mentions your content letter size. By changing its numerical value, you can set your desire size for your post content. Below mentioned pictures shows Calibri font and Calibri font size = 20 px.

 




Here you can see the font size = 30px…Likewise you can change font size of your post content.

Final font size:

How to find this code in HTML editor page:

Finding above mentioned code in HTML editor page is the biggest headache, For that you can use this method…

  1. Copy your original content which blog content’s font has to be change
  2. Paste it in your MS Word
  3. Find what is your font
  4. Go to blogger dashboard => go to theme option => edit HTML
  5. Control + F => search your content font which you have found through MS word
  6. Search until to see below mentioned code
See More:  How to Import Blogger to WordPress without affecting traffic

 

.post-body

{

width:100%;

margin-bottom:15px;

font-family:’Calibri’, sans-serif;

font-size:20px;

line-height:1.3em;

font-weight:400

}

  1. While searching you will see your font name instead of Calibri mentioned here
  2. Then change font name and size
  3. Save your theme => That’s all you have done it.

Here by adding additional code color: any color; in inside of this, you can post your content with any color.

Examble:

.post-body

{

width:100%;

margin-bottom:15px;

font-family:’Calibri’, sans-serif;

font-size:20px;

line-height:1.3em;

color: red;

font-weight:400

}

Refer below mentioned Picture.

Note: Instead of using red colour, you can use hex color code for changing post content.

How to change font for Post title of your content:

There are two methods are available to change font size of your post title

  1. Change font size through blogger customize advance setting in additional CSS method
  2. Edit HTML method

Change font size of your post title for blogger through Customize advanced setting:

This is also best method to change your post title font. You can add your desire font size and desire font to your Blog post title.

Add CSS method:




  1. Login to your blogger => theme => customize
  2. Go to advance setting => add CSS
  3. Paste below mentioned code

h1 {

font-family: Calibri;

font-size: 34px;

font-style: normal;

font-variant: normal;

font-weight: 400;

line-height: 78.2px;

}

h3 {

font-family: Candara;

font-size: 26px;

font-style: normal;

font-variant: normal;

font-weight: 700;

line-height: 34px;

}

Here I have given the code for changing Title H1 and sub title or sub heading H3

If you want desire color add additional code Color: any color; inside of the H1 and H3 coding.

If you need H2, H4, H5 and H6, replace it in above code instead of H3 => H2 or any head line you want.

Add the code additionally…

h1 {

font-family: Calibri;

font-size: 34px;

font-style: normal;

font-variant: normal;

font-weight: 400;

line-height: 78.2px;

}

h2 {

font-family: Candara;

font-size: 26px;

font-style: normal;

font-variant: normal;

font-weight: 700;

line-height: 34px;

}

 

h3 {

font-family: Candara;

font-size: 26px;

font-style: normal;

font-variant: normal;

font-weight: 700;

line-height: 34px;

}

Click apply blog….

That’s all you have successfully changed font for your blog title.

Edit HTML method:

Just you find below mentioned code in your theme HTML code

  1. Blogger dashboard => theme option => edit HTML
  2. Find below mentioned code

h1,h2,h3,h4,h5,h6{font-family:’arial’, sans-serif;color:$(title.color);padding:0;margin:0}

  1. Replace green marked with your desire font
  2. Save it,
  3. You have successfully change font of your post title.

 

 

 

 

 

 

Ads

LEAVE A REPLY

Please enter your comment!
Please enter your name here