How To Change Font Of Blog Post Title

Blogger post title is the main attraction to divert the attention of readers. By modifying the post title font, size and colour we can bring some variation. Besides this when a visitors first land on a blog then first s/he look into all the post title and after that, if found interesting then they enter into the post for reading.

In a Blogger blog, we can change the headline style of each post as needed. We may alter the text orientation, typography, colour, and size of a post's title. Blogger allows us to add a background colour to post titles as well as an underline beneath them. This post will show you:

how to make your Blogger blog's post titles more appealing?

Every Blogger theme has its own CSS code but for customizing the post titles you need to do a little tweak. Blogger post titles can be customized by adding small attributes. Any update to the post titles CSS code in the Blogger theme script will have the same impact on all titles on your Blogger site.

How to Change Post Title Font, Size and Color in Blogger Theme?

However, in this tutorial, we will learn how we can change our blogger theme's post title font, size and colour. But this tutorial for custom blogger theme users only. We will use a CSS code block that will help you to play with your post title.

By default in the blogger theme, we use different Headline, sub-headline, minor headline etc. And Blogger denotes this headline by

h1 = Header 1
h2 = Header 2
h3 = Header 3
h4 = Header 4
h5 = Header 5
h6 = Header 6

The priority of headline sets higher to lower. Suppose h1 = Header 1.

Generally used to at the Blog title. And almost all template including the blogger default template uses the h3 tag for post title. So our code for post title start with .post h3 and here .post means blog post and h3 tag means header 3.

How to remove The Older Post Title Code from the Blogger theme?

Every theme must have the code start with .post h3 so you have to find this kind of code. After that simply delete those code block.

Before making any changes to your Blogger design, it's a good idea to make a backup. Backup can assist you if you encounter any errors when editing the template's code.

After taking backup of your blogger theme follow the steps below:

Step #1: Sign in to your blogger account and go to the blogger dashboard

Step #2: On Blogger Dashboard Click on "Theme" -> "Edit HTML"

Step #3: Scroll down and find the code like below. Code won't be exactly like below but find similarity

                      .post-title, .post h3{ ................................................................... ................................................................... ................................................................... } .post h3 a, .post h3 a:visited, .post h3 strong { ................................................................... ................................................................... ................................................................... } .post h3 strong, .post h3 a:hover { ...................................................... .....................................................  }

Step #4: Now simply delete the code block.

How to Add Post Tile code for Customizing the Post Title Font Style, Size and Colour?

After successfully removing the code block you have to add the new code for tweaking the Post title Font, Size and Color. I didn't define any variable here so it will work easily but you won't be able to change it from the theme customize option at the backend of the theme.

If you want to use custom google font in your blogger theme then you can read our another tutorial.

Please go through the below steps-

Step #1: Sign in to your blogger account and go to the blogger dashboard

Step #2: On Blogger Dashboard Click "Theme" -> "Edit HTML" from the left menu.

Step #3: Now find the </b:skin> by pressing Ctrl+F

Step #4: Paste the below code above </b:skin> and hit the Save theme button.

                      .post-title, .post h3{ line-height: 26px; color:#000000; font-family: 'Roboto', Sans-serif;font-size:140%;font-weight:700; text-transform: uppercase;margin-bottom:10px; padding-bottom:5px } .post h3 a, .post h3 a:visited, .post h3 strong { display: block; text-decoration: none; color: #0872AF; font-weight: normal } .post h3 strong, .post h3 a:hover { color:#222222; }

Different theme has different coding style. It doesn't guarantee that you will find exact .post-title, .post h3 code. It can be like .post-title, .post h2 or .post-title h1, .post-title h2, .post-title h3

You can use the code like below. This will change the all headline text on your blogger theme.

.Blog .post .post-title { font-family: 'Noto Sans', sans-serif; color:#473f3f; text-align: left; margin-left: 0; font-size: 30px; line-height: 1.33333; font-weight: 600; margin: 10px 0 .8333333333333em; }

Alternatively you can apply below CSS script to change the all headline's typography style, font size and color.

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; font-family:'Noto Sans', sans-serif; color: #473f3f; }

In the above example i have used 'Noto Sans' font as font-family. You can use different like font-family:'Roboto', sans-serif;

How to make necessary changes to customize Post Title in Blogger?

Change colour :#000000 code with different colour code for displaying on the posting page.
For changing the font alter 'Roboto', Sans-serif with different font. Remember the first font with the quote represents the main font. Here 'Roboto' but you can replace it with 'Noto Sans', sans-serif;.
Alter font-size:140% with 120% or 150% or 160% for decreasing or increasing font size on home page.
Alter font-weight:700 this will change the font boldness. You can change 700 with 400 or 500 or 900.
Remove text-transform: uppercase; code line if you don't like all the uppercase font. You post title will display in lowercase.
Change color: #0872AF code for visited link color code.
Alter colour :#222222 for changing font hover color.

You can get the colour code from our Flat UI Color collection

Hope you have successfully modified your blog post tile with new font, size and colour. If you have any query then feel free to write me. Thanks.