Fonts Represent Your Content

Theres no doubt that your words, your posts, are the meat and potatoes of your blog or website. Those words, along with your lovely colors and pictures, tell your website’s story. But, don’t forget to pay attention to your font selections. The fonts you choose in designing your theme can influence whether or not people hang around to see more than a page or two of your pretty work.

Fonts come in a wide variety of types and styles, but unfortunately, unless the user actually has that font installed on their machine, they will see something that is only “close”, such as a generic serif or sans-serif, to what you wanted to present. If you want to see a list of what you have installed on your machine, visit several of the font sites listed below or this font test. If your font is there, you will see it. If not, you will see a generic Courier font.

In your Themes style sheet (style.css usually) you can control the font-family (the list of fonts to display), the color, the size, and other aspects of your font. The following example sets the fonts for your sidebar menu, sets the size to 1em high, and sets the color to blue:

#menu {font-family: Verdana, Arial, Helvetica,
sans-serif; font-size:1em; color:blue; }

As you can see, you have set more than one font in the font-family. If the user does not have Verdana, Arial will take over. If Verdana and Arial are missing, they have a chance to use Helvetica. If all else fails, the users system fonts takes over and uses the default font for sans-serif. This list of choices helps the designer control the fonts and insures a more consistent “look and feel”.

Font families tend to be single words, but on occasion you will find a phrase to represent a font such as Lucida Console. This is set in the style selector surrounded with quote marks such as:

#menu {font-family: Verdana, Arial, Helvetica,
“Lucida Console”, sans-serif;…..

Fonts in WordPress

WordPress Themes use fonts in many different ways, and not always consistently. It depends upon the Theme authors decisions and needs in designing a Theme. Different fonts can be found in different areas of the website, one type in the header, another in the sidebar (or maybe two or three), and another font style or type in the post content area. Finding those fonts in order to change them, can give a user grief

Since fonts can be anywhere, finding the font you want to change can be a challenge. Generally, an overall font is set in the body of a website.

body {font-family: Verdana, Arial, Helvetica,
Futura, sans-serif;
font-size: 1em;
padding:0;
margin:0; }
This covers the definition of the fonts found within the site that are not definied by a specific tag, class or div. Its the “fall-back font”.

Fonts found within the header of a site are normally found within the header div and same for the sidebar or menu and footer style divisions. The content, though, may be more challenging to track down.

Fonts within the post content area are often found within the following, but not always, CSS classes:

• content
• post
• entry
• post-entry