More About Changing Fonts and Font Size Using WordPress

This WordPress tutorial video (below) shows you how to change a font in a heading or a paragraph. This is something you can do for a specific heading or paragraph.

If you want to make a “global” change to the fonts used by your WordPress theme, you have to edit the style.css file that is part of your WordPress theme files.

One example of a global font change would be to change the font that is used for the title of each page and post. The Business Blogging 101 site has titles that use the Arial font and are a size of 16 pixels in height, with a medium blue color, and a light blue underline. By changing the style.css file, I could make the font a different family, like Times, and I could increase the size to 20 pixels; I could make the font color red; and I could remove the underline. That change would apply to every page and post on the site.

See the previous tutorial, Changing Fonts and Font Size Using WordPress for an overview of how to make a change to the style.css file. If you haven’t edited the files in your WordPress theme before, it can be a little challenging, so send me a comment if you have questions.

When you change a font – either globally or in a specific case – it’s a good idea to specify a group of fonts instead of just one. That way, if the first font is not installed on the computer of someone visiting your site, their browser will use the second one. If the second one is not installed, it will use the third, and so on.

Here are some suggested options for the font-family property. This will make sense when you watch the video below.

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;


Here are code samples that go with this video tutorial.

<p style="font-family:'Times New Roman',Times,
serif;">This is a paragraph</p>

This is a paragraph

<h1 style="font-family:'Times New Roman',Times,
serif;">This is a heading</h1>

This is a heading

(You can find a discussion of “Web Safe Fonts” on Safalra.com.)


Advertisements

4 Responses

  1. Mr. McLaren, I’ve viewed your tutorial on how to change font within an entry but is it possible to change the font style for the title to said entry? Or perhaps the font on the catagory titles on the sidebar menu? i.e Recent Comments, or Blogroll titles

    Any help would greatly be appreciated, thank you.

  2. How about making a 2-minute instead of a 9-minute video for this?

  3. Thank you so much for this!

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

%d bloggers like this: