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 an open tag and a close tag. So you always open with (span)* and close with (/span)*.

*NOTE: I have to substitute () in my tags as wordpress deletes them otherwise. You need to use

span

where I use (span) (/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 and close with (span) and (/span)*.
(see note abpve on replacing all brackets used in my tags!!!)

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.

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

Post navigation

10 thoughts on “How to change font style, size and colour in WordPress.com

  1. Anonymous

    Thanka a ton.

  2. Thanks for providing this awesome info. I’ve been searching for some time for guidelines like this, that isn’t complicated with examples.
    Is there a way to set a font for all posts automatically? (I use the same theme Adventure Journal).

    • Thanks for taking the time to comment (^-^)/
      Unfortunately (as far as I know) you can’t assign a specific font to a ready made theme. Each theme has a designated font so that will be used by default. I think if you pay for a blog on wordpress.org you can assign your own default font as you can create your own theme, but not on wordpress.com.
      It’s a shame and I wish there was a way because, like you, I tend to use the same fonts for most of my posts. Oh, well.

  3. Hello my friend! I wish to say that this article is
    amazing, nice written and include almost all vital infos.

    I’d like to look extra posts like this .

  4. Nothing I’ve tried from six different tutorials is changing anything about the font on my blog. This is exactly what I was looking for, (to the point, easy to understand), but it isn’t working either. Any suggestions? :-/

    • What is the name of the font you are using? Some fonts are not accepted by CSS and HTML coding. Also, which wordpress.com theme are you using? Some themes just won’t allow you to change the font. Another thing to remember is that unless you have the fonts installed on your computer they won’t work. For example, I write almost all my posts in Ubuntu font but because most people don’t have that font installed on their computers, they see the post in a default font not the Ubuntu font. Perhaps check which fonts are available on your computer?

      If you like, you can include the line of code in a comment here and I can look at it for you ^-^

      • Thanks. I’m using the Ever After theme, and I just want to change it to Times New Roman, x-small or ~1.4em. <—- (I’ve seen size done both ways). I’d like to change the whole post to that; could that somehow be the issue?

        This is what I’ve been trying:
        (my post)

        Thanks a lot. I’m new to wordpress.. I hope changing it is possible.

      • The line of code didn’t show up..

      • Hmm… OK, try this:

        script

  5. I am very happy to read this. This is the type of manual that needs to be given and not the accidental misinformation that is at the other blogs. Appreciate your sharing this greatest doc.

If you find this useful or interesting please leave me a comment. If you have a question feel free to ask (^-^)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.