Changing Fonts and Font Size Using WordPress

This is a reply to a reader who asked about how to change fonts and font size in WordPress in the comments to the “How to Position an Image and Wrap Text Around an Image Using WordPress” tutorial. The reader asked if there is a way to create a special font format to use for captions under photos.

The “quick and dirty” way to change the font is to use the same “inline” Cascading Style Sheets (CSS) technique used in my tutorial for image position and padding.

See the video tutorial at the end of this post, and the video in the post called “More About Changing Fonts and Font Size Using WordPress” to see how to do it. They walk you through the steps discussed here.

I am borrowing from the examples at w3schools.com such as these CSS Examples. In particular, look at the explanation and examples of the CSS font family property, and look at this font formatting example which includes a handy tool you can use to experiment by making changes to the CSS code and seeing the results instantly.

Here is the inline technique to change a font from the default that a blog or website uses to the “serif” font “Times”. Fonts like Times or Times New Roman are serif fonts. Examples of “sans serif” fonts are Helvetica, Arial and Verdana.

Here are some options you can try for the font-family property (thanks to Safalra.com):

font-family:Verdana,Geneva,sans-serif;
font-family:Tahoma,Arial,Helvetica,sans-serif;
font-family:Georgia,Utopia,Palatino,’Palatino Linotype’,serif;
font-family:’Times New Roman’,Times,serif;
font-family:’Courier New’,’Courier’,monospace;

Insert the CSS information using the Code editing window (now called the “HTML” editing window in WordPress 2.5) just as you did in the “How to Position an Image…” tutorial. You have to add the p style=”…” and /p along with the left and right brackets on either side of the text as shown.

That’s the quick and dirty way. Again, check out the video below, and the next video in the post called “More About Changing Fonts and Font Size Using WordPress” to see how to do it.

What I say next really deserves a separate video tutorial (that hasn’t been made yet). If you would like me to make one, just send me a comment.


If you want to use something like a caption throughout your site, making an addition to the style.css file that is part of your WordPress theme is the way to go. (Note that on WordPress.com you have to pay an additional fee each month to be able to make changes to your theme files. If you don’t pay that fee, you can’t use the following technique.)

Again, check out the very cool examples at s3schools.com noted above.

To make a reusable format for something like a caption, what you would need to do is add the style information that appears between the style and /style tags in the font formatting example into your style.css file. That is, you put

p.sansserif {font-family: sans-serif}
or
p.caption {font-family: Helvetica, sans-serif; font-size: 10px; font-weight: bold; width: 300px;}

into your style.css file.

If you have third-party hosting for your WordPress site, you’ll need to use FTP software to download and upload the style.css file from you web hosting server. Your web hosting provider should be able to give you more infomation about FTP software. After adding the new code to your style.css file, save the file and upload it to your web hosting server using FTP. (If your blog is hosted on WordPress.com, you don’t have to worry about FTP. Just save the modified style.css using the WordPress dashboard.)

Then you need to add class=”sansserif” — or class=”caption” — to the p tag using the HTML Code editing window, just as you did to add padding to an image. Except in this case, you are assigning a class instead of a style to the paragraph.

I’m sorry if this is thoroughly confusing, but note that you have already used CSS to position and pad an image. The quick and dirty font change uses the same CSS style technique.

The second, more difficult font technique just goes one step further by placing the CSS code in the style.css file that is part of your WordPress theme as well as putting the p class=”…” into the HTML using the Code editing window.

Let me know if you have questions. I have a feeling you will!


Click on the video screen once to watch the tutorial here on the Business Blogging 101 page. Click again to view a slightly larger screen on the YouTube website.


The following are examples from the video tutorial.

This is a paragraph

Grapes in vineyard - free from iStockphoto.com

This is a caption

About these ads

9 Responses

  1. what about arabic font?

    • I haven’t worked with Arabic or any other language besides English in WordPress, but because WordPress uses Unicode I think it can accommodate most common fonts like Arabic, Simple Chinese, Traditional Chinese, and others very easily. How those fonts are affected by CSS, I don’t know. It’s a great question. Looks like there are lots of good resources and that it’s easy to create a WordPress blog in Arabic.

  2. Wouldn’t it just be easier to use Windows Live Writer to format your blog post any way you wish, and then publish it? At least that is what I do, and I have no problems whatsoever with my font selection, photo position, or text formatting. There is just so much more you can do with Windows Live Writer that WordPress Themes limit otherwise. After I have my blog post written and formatted I just click publish, and Windows Live Writer uploads the post as-is, which the WordPress themes don’t interfere with.

    • @WilliamSipe – It sounds like it might be easier to use Live Writer. I don’t have any experience with it. Can you show me an example post that does something you can’t do in WordPress? The “Changing Fonts and Font Size” tutorial I created for this post is quite old, I’m sorry to say, and I have not revisited the topic. It might be completely out of date. There may be ways within WordPress to do this kind of formatting today. I’m fairly sure there are plugins you can use, but those are not available for WordPress.com sites, only for self-hosted WordPress sites.

  3. Good post. Now I am able to change my font easily.
    Thanx!

  4. May I ask you few question? How can you make a horizontal line in your post? In this post, you just make a horizontal line as separator. How you did that? What is the HTML code?

Leave a Reply

Please log in using one of these methods to post your comment:

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

Follow

Get every new post delivered to your Inbox.

Join 220 other followers

%d bloggers like this: