Using Wordpress.com

How to change font style, size and colour in WordPress.com

There are many helpful posts about this on the WordPress Support.  But trawling through scores of posts to find a specifically relevant AND detailed one can be a bit of a nightmare.  So I thought I’d write a post on it myself.

*****************

o
Using HTML in WordPress.com

Most themes in WordPress.com have an inbuilt font.  This means that however much you change the colour and things they often revert to the default theme.  With other things you don’t have the options available in the default WordPress.com Edit Post screen.  But you can override all this by using HTML.

In order to change your text style, size etc. you need to use HTML tags.  A lot of posts tell you this. And then don’t tell you how to switch to the HTML side of things.  Yay, helpful!

In order to use HTML you have to click the right hand tab labelled Text on the Edit Post page. 

So, to completely avoid all and any misunderstandings or confusion, I will write down all the details.  If you know the tabs I mean just skip this.

Go to Dashboard > Post

then go to the post you want to edit and click Edit.  You should now be on the Edit Post page. 

There are two tabs to choose from when you’re editing your posts:

Visual (default normal tab)

or Text (HTML tab)

.

Now onwards to the actual editing!
.
o
> Changing the Font Style

If you want to change your text font style and you are handy with font names then you don’t need to use these resources.  If you are not sure of the names of the fonts you want there are some handy resources at Wavian.com  It’s a page with links and a decent font list with a good variety of styles.

There’s also a page discussing the standard web safe fonts here.  I personally don’t pay that much attention to whether they are standard or not as this blog is purely for my own amusement, but it depends what you need.

OK, so after finding out the name of the font you want go to the html tab (the text tab).  I will use,

“Once you eliminate the impossible, whatever remains, no matter how improbable, must be the truth.”

which is an amazing quote from the immortal Sherlock Holmes.

When you use HTML tags to change the font in WordPress.com you always need to remember to create a close tag.  So you always open with <span> and close with </span>.

For example, if I just want to change the font for the first part like this:

“Once you eliminate the impossible, whatever remains, no matter how improbable, must be the truth.”

I contain just that part in between the tags like this:

<span style=”font-family: lucida handwriting;”>”Once you eliminate the impossible,</span>

o
o
> Changing the Font Size

In order to change the font size you use a similar tag.  For example, if I want to change the next part like this:
“Once you eliminate the impossible, whatever remains, no matter how improbable, must be the truth.”

I contain just that part in between the tags like this:

<span style=”font-size: large;”>whatever remains,</span>
o

o
> Changing the Font Colour

In HTML every colour has its own code.  For example, Black is #000000, White is #FFFFFF, Red is #FF0000, Blue is #0000FF, and so on. There is a great resource called HTML Color Picker which you can use to find the HTML colour code you want.

In order to change the font colour, you again use a similar tag. For example, if I want to change the next part like this:

“Once you eliminate the impossible, whatever remains, no matter how improbable, must be the truth.”

I contain just that part in between the tags like this:

<span style=”color: #009999;”>no matter how improbable,</span>
o
.
> Changing Font Style, Size and Colour

In order to change all of the above you need to include them all in one tag.  For example, if I want to change the final part like this:

“Once you eliminate the impossible, whatever remains, no matter how improbable, must be the truth.”

I contain just that part in between the tags like this:

<span style=”font-family: courier; font-size: x-large; color: #800000;”>must be the truth.”</span>

o

*****************

So, things to remember about these HTML tags.

1.) Always remember to open with <span> and close with </span>.

2.) Always remember to create a close tag.

3.)  Check your spelling!  Misspelled tags won’t work.

4.) If you are changing more than one thing, make sure that

  • the quotation marks “” include everything between the = and the >
  • each separate part (style/size/colour) is separated with a semicolon ;.

5.)  Remember, not all font styles and colours will work.  Trial and error is the best way to find out what works for you.

OK, that’s all from me.  Have fun HTML-ing.  Hope it goes well.

Categories: Using Wordpress.com | Tags: , , , , , , , , , , , , | 10 Comments

Create a free website or blog at WordPress.com.