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.

SHARE THIS