Adobe-Adquiere-Typekit_6029

Change Font [TypeFace] and Font Color on WordPress.com Blogs

FTW!FTW!FTW!

TheDolt
TheDolt

TheDolt

You can change fonts using HTML it’s not fiddly and is definitely worth the hassle. but keep reading 🙂

WordPress.com Blogs may give you countless features when it comes to customizing and writing but one of the options which I personally (I bet you too) have been personally missing is the ability to write in custom fonts. In fonts that I like. In font(s) that is/are different than which everybody uses. I’m not telling you to write all your posts in Comic Sana MS (yes, I have seen Blogs which use this font) but once in a while its fun.

Now, writing is custom font [TypeFace] is not possible on WordPress.com Blogs unless you buy TypeKit upgrade. Of course it gives you hell lot of other options (changes font globally) but then also has a price tag and forces you to choose at most 2 fonts (unless you go for professional package). Here is the trick to write in any font, in any color on any WordPress.com Blog. It is simple though everything has to be done manually.

Open the Edit Page of any existing post or create a new post and switch over to the HTML Editor. Now copy paste the following code there and switch back to Visual Editor again. It works, right?!

[sourcecode language=”html”]<span style=”font-size: large;”><span style=”line-height: 20px;”>&lt;/span&gt;&lt;span style=”font-size: 12pt; line-height: 115%; font-family: Jokerman;”&gt;FTW!&lt;/span&gt;</span></span>[/sourcecode]

The HTML code that you see above does all the trick. The code is important because it is recognized by WordPress.com unlike all other codes that I have tried using (WordPress.com either filters them out or makes changes in them.

WordPress has a guide to changing Font Size and colour but it is useless since when it comes to changing size it offers only a handful of sizes. On the other hand this trick lets you choose your own size.

Here is how you write using custom fonts (TypeFace) in colors that you want unlike the black that WordPress.com offers. See the format:

<p><span style=”color: COLOR HEX CODE HERE:font-size:SIZE GOES HERE, IN NUMBERSpt;line-height:HEIGHT GOES HERE, IN NUMBERS%;font-family:FONT NAME HERE;”>*WRITTING PART GOES HERE*</span></p>

Some Color Hex Codes (color names can also be used)

Black: #000000 Gray: #808080 Silver: #C0C0C0 White  #FFFFFF
Navy: #000080 Blue: #0000FF Teal: #008080 Aqua: #FFFF
Purple: #800080 Maroon: #800000 Red: #FF0000 Fuschia: #FF00FF
Green: #008000 Lime: #00FF00 Olive: #808000 Yellow: #FFFF00

See full list of Hex Codes here.

Ignore the *. Use everything as it is. Here is the Source Code for the written material in the starting of the post

[sourcecode language=”html”]<p style=”padding-left: 60px;”>&lt;span style=”font-size: 10pt; line-height: 115%; font-family: Niagara Engraved;”&gt;FTW!&lt;/span&gt;</p>[/sourcecode]

[sourcecode language=”html”]<p style=”padding-left: 60px;”>&lt;span style=”font-size: 25pt; line-height: 115%; font-family: Jokerman;”&gt;FTW!&lt;/span&gt;</p>[/sourcecode]

[sourcecode language=”html”]<p style=”padding-left: 60px;”>&lt;span style=”font-size: 50pt; line-height: 115%; font-family: Wst_Swed;”&gt;FTW!&lt;/span&gt;</p>[/sourcecode]

[sourcecode language=”html”]<p style=”padding-left: 30px;”>&lt;span style=”font-size: 50pt; line-height: 115%; font-family: Wingdings;”&gt;TheDolt&lt;/span&gt;</p>[/sourcecode]

[sourcecode language=”html”]<p style=”padding-left: 60px;”>&lt;span style=”color: #ff0000; font-size: 25pt; line-height: 115%; font-family: Wingdings;”&gt;TheDolt&lt;/span&gt;</p>[/sourcecode]

[sourcecode language=”html”]<p style=”padding-left: 60px;”>&lt;span style=”color: #cde472; font-size: 10pt; line-height: 115%; font-family: AGaramondPro-Italic;”&gt; &lt;/span&gt;</p>[/sourcecode]

[sourcecode language=”html”]<p style=”padding-left: 30px;”>&lt;span style=”color: #cde472; font-size: 10pt; line-height: 115%; font-family: AGaramondPro-Italic;”&gt;TheDolt&lt;/span&gt;</p>[/sourcecode]

Have fun!

FaceTweet it!

Like This!

Enhanced by Zemanta

11 thoughts on “Change Font [TypeFace] and Font Color on WordPress.com Blogs”

  1. Hey friend my worpress is 3.0.1 and I can't write in "sinhala" ( the languge using is sri lanka ) can u pls help me 4 that……. when I paste something writen is sinhala font in my post, it shows- " ?????????? " like that. help me

  2. Hey friend my worpress is 3.0.1 and I can't write in "sinhala" ( the languge using is sri lanka ) can u pls help me 4 that……. when I paste something writen is sinhala font in my post, it shows- " ?????????? " like that.

Leave a Reply

Your email address will not be published. Required fields are marked *