Change font style of the first letter of post title

Really quick tutorial from me today that was requested a couple of times on how to change the first letter of your post title and post text on Blogger to be a different style giving a magazine effect like this sentence.

I’ve seen this technique used in some cool and creative ways. You could combine it with this tutorial on adding a custom font to Blogger or WordPress and add a custom font for the first letter.

Change the font style of the first letter of post title

Go to Template > Edit HTML and search for </b:skin>. Paste one of the following codes above it

h3.post-title:first-letter { }

or

.post-title.entry-title:first-letter { }

or

h3.post-title a:first-letter { }

Add the CSS

Now you can customise the first letter by adding CSS in between the brackets. Here’s a list of some of the things you can change.

  • Change font – font-family: 'FONTNAME';
  • Change font size – font-size: #px;
  • Underline the letter – text-decoration: underline;
  • Add line over letter – text-decoration: overline;
  • Add line/strike through – text-decoration: line-through;
  • Change font to uppercase – text-transform:uppercase;
  • Change font to lowercase – text-transform:lowercase;
  • Change font colour – color: #HEXVALUE;
  • Change font background colour – background: #HEXVALUE;

Example of it in use

Here is an example, notice the H is different.

h3.post-title: first-letter { font-family: 'Cookie', cursive;; font-size: 12px; text-transform:uppercase; color: #ec008c; } 

Change font style of the first letter of post text

Go to Template > Edit HTML and search for </b:skin>. Paste the following code above it.

.post-body:first-letter { } 

Then just like above add the css between the brackets to change the first letter of the body text in each blog post.

Join over 1,000 creators starting, building and growing their online business

Making marketing more manageable (even with limited time, money and know-how) with the latest strategies, insights and updates delivered to straight to your inbox.

By signing up youโ€™ll receive The Roundup newsletter and additional resources. No spam or unnecessary emails. You can unsubscribe at any time.

10 responses to “Change font style of the first letter of post title”

  1. Munira @ In Vogue with Books avatar

    Hey Ellie, great post! The code for post title works but I want it in the post body, like you did and that code isn’t working for me, am I doing anything wrong?

    1. Ellie M avatar

      Hello, I can’t see the code in your CSS to check that everything is right. It should alter the B in “Book Title” in your latest post but may it has something to do with your custom template. Add this code to test it .post-body:first-letter { font-size: 22px; color: #00cccc; }

      1. Munira @ In Vogue with Books avatar

        Still no luck..but I think it’s because of my custom template ๐Ÿ™ Thanks for the help anyways..I think I’ll have it once I change my design ๐Ÿ™‚

        1. Ellie M avatar

          Hi, I can see the “B” as being different. See the screenshots here & here.

          1. Munira @ In Vogue with Books avatar

            Oh, I think it doesn’t show up in Firefox for some reason, I could see it too once I loaded the page on Chrome..Thanks a ton for helping me out ๐Ÿ˜€

  2. Kade Bailey avatar

    Your amazing I love your tips!

  3. Soma Rostam avatar

    Hey!
    Thank you SO MUCH for the amazing posts. I have been learning so much and I am LOVING what I’m doing to my OWN blog!
    I was wondering, can you change the style of the first letter of a word in the post body.
    Like, I don’t want to change the styling of the first few lines in my posts, but , the first letter of the fifth line, I want to have a different styling.
    Can we do the same thing you did in CSS, in the individual HTML editing of the post?
    Thanks again!

    1. Elaine M avatar

      Hello. Add .special {} to your CSS and add the styling you want to between the brackets. Then you can wrap the word or letter in the following <span class="special"> TEXT YOU WANT DIFFERENT HERE </span> and it will adapt that styling.

  4. Areli avatar
    Areli

    Can this be done for only the posts and not the ‘Pages’ section? It works for the posts on the homepage but also for the wordings in the ‘Pages’ section.

    1. Elaine Malone avatar

      Hello Areli, it can be used for pages also. You can use .post-body:first-letter to target the first letter of all body content, and use conditional statements to only target pages. Hope this helps!