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

This is a caption