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

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

September 6th, 2010 Leave a comment Go to comments

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?!

<span style="font-size: large;"><span style="line-height: 20px;"></span><span style="font-size: 12pt; line-height: 115%; font-family: Jokerman;">FTW!</span></span></span>

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: #000000Gray: #808080Silver: #C0C0C0White  #FFFFFF
Navy: #000080Blue: #0000FFTeal: #008080Aqua: #FFFF
Purple: #800080Maroon: #800000Red: #FF0000Fuschia: #FF00FF
Green: #008000Lime: #00FF00Olive: #808000Yellow: #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

&lt;p style="padding-left: 60px;"&gt;&amp;lt;span style="font-size: 10pt; line-height: 115%; font-family: Niagara Engraved;"&amp;gt;FTW!&amp;lt;/span&amp;gt;&lt;/p&gt;
&lt;p style="padding-left: 60px;"&gt;&amp;lt;span style="font-size: 25pt; line-height: 115%; font-family: Jokerman;"&amp;gt;FTW!&amp;lt;/span&amp;gt;&lt;/p&gt;
&lt;p style="padding-left: 60px;"&gt;&amp;lt;span style="font-size: 50pt; line-height: 115%; font-family: Wst_Swed;"&amp;gt;FTW!&amp;lt;/span&amp;gt;&lt;/p&gt;
&lt;p style="padding-left: 30px;"&gt;&amp;lt;span style="font-size: 50pt; line-height: 115%; font-family: Wingdings;"&amp;gt;TheDolt&amp;lt;/span&amp;gt;&lt;/p&gt;
&lt;p style="padding-left: 60px;"&gt;&amp;lt;span style="color: #ff0000; font-size: 25pt; line-height: 115%; font-family: Wingdings;"&amp;gt;TheDolt&amp;lt;/span&amp;gt;&lt;/p&gt;
&lt;p style="padding-left: 60px;"&gt;&amp;lt;span style="color: #cde472; font-size: 10pt; line-height: 115%; font-family: AGaramondPro-Italic;"&amp;gt; &amp;lt;/span&amp;gt;&lt;/p&gt;
&lt;p style="padding-left: 30px;"&gt;&amp;lt;span style="color: #cde472; font-size: 10pt; line-height: 115%; font-family: AGaramondPro-Italic;"&amp;gt;TheDolt&amp;lt;/span&amp;gt;&lt;/p&gt;

Have fun!

FaceTweet it!

Like This!

Enhanced by Zemanta
Categories: Wordpress
  1. ronitkumar
    July 19th, 2014 at 05:12 | #1

    This Website Is Full Of Knowledge As This Blog Check Out Viber hacks

  2. December 15th, 2010 at 18:22 | #2

    Are you sure there are no limitations? I hate blogger.

  3. allwyn
    December 15th, 2010 at 16:36 | #3

    thats why I prefer blogger over this, there are tutorials for everything there and no limitations.

  4. November 26th, 2010 at 15:37 | #4

    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

  5. wiaw
    November 26th, 2010 at 15:36 | #6

    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.

  6. wiaw
    November 26th, 2010 at 15:33 | #7

    සින්හලෙන් ලියන්න පුලුවන්ද?

  7. October 20th, 2010 at 06:32 | #8

    Okay, thanks, I figured that was the reason…thanks for your response…Lilly

  8. October 19th, 2010 at 01:36 | #9

    For some reason, I did not have luck changing colors, I have a free typekit upgrade, but was not able to change color or font size with the code above. Could you advise as to what possibly could be the problem? Do you think it is because of typekit? http://lmbqu1nn.wordpress.com/

    • October 19th, 2010 at 15:32 | #10

      I am no expert here but I think it is because of the Typekit upgrade. I am myself upgrading at this moment and once done and tried with Typekit I will be able to help you in a better a way.

  9. September 7th, 2010 at 01:15 | #11

    Except that this method will only work with fonts installed on the viewers' computer. TypeKit works regardless of whether the viewer has the font installed or not.

Protected by WP Anti Spam