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.