There's 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 Theme's 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've set more than one font in the font-family. If the user doesn't have Verdana, Arial will take over. If Verdana and Arial are missing, they have a chance to use Helvetica. If all else fails, the user's system fonts take 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;.....
WordPress Themes use fonts in many different ways, and not always consistently. It depends upon the Theme author's 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 defined by a specific tag, class or div. It's 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:
They may have the font information in the specific class or in a paragraph tag:
.content p { margin:5px;
padding:5px;
font-family: Tahoma, Verdana, Helvetica, sans-serif;
font-size: 110%;
color: black; }
Fonts within the sidebar or menu nested lists can be very difficult to narrow down. For a step-by-step guide of all the nested lists found within many WordPress sites, see Styling Lists with CSS.
If you are still having trouble tracking down a specific font code, consider using some of the tips and techniques in Finding Your CSS Styles.
Determining which font will work best on your site is a personal choice, but there are articles that will help you decide. We recommend that you begin with fonts that are most commonly found on most people's computers, and that are easy to read.
To find out what fonts are most popular, check out the following:
Besides using pre-existing fonts - the fonts which normally come with operating systems when installing, such as Arial, Verdana, Tahoma, Georgia - using CSS in styles.css, you can define a font-family for an element on the page. Also, you can use external fonts - this means users don't need to have that font on their system. To use the @font-face rule to define your own font family you can put it in the top of style.css like this:
@font-face {
font-family: Museo300;
src: local('Museo300-Regular'),
url("fonts/Museo300-Regular.ttf") format('truetype');
font-weight: normal;
}
Then later on, you can write:
.post-item {font-family: Museo300}
You can get more information about @font-face rule in following links:
You can also change the font size your viewers see. In the days of the typewriter and even with today's word processors and desktop publishing software, the "point" system is still in use. You should be familiar with things like "12pt Times Roman" and "8pt Arial". Point sizes don't work well on web pages because most browsers can't interpret what a "point" is. They understand pixels and percentages of a base size, but typewriter point sizes are interpreted differently on different browsers. You can use point size but there are better alternatives.
You can set your fonts to be absolute, which means they are fixed in size, but that too, has disadvantages. The problem with absolute font size is that if a user has their browser set to "see" larger fonts (View > Text Size) or are using special software for the visually or physically disabled, you may have taken away their rights to "see" larger fonts. If you have to set the font to a specific size in order for your layout to work, make sure you don't use that font for your site's more important information. This example shows how to set an absolute font size:
#menu ul li {font-size: 12px; color: green; }
The more popular method is to set your font-size for the whole document, then, base everything on a relative size from there. A percentage of the base font is used, allowing the font to resize itself based upon the user's preferences, too:
body { font-size: 1em; }
#menu ul li { font-size: 110%; color: green; }
There are a lot of fun things you can do with fonts! You can make your fonts italic, you can make them bold, and you can make the first letter of a paragraph larger than the rest of the text. The list of variations goes on and on. This lesson is just a peek into how to style and size fonts on your WordPress site. There is a lot more that goes into deciding which font to use, how to use it, how many to use, what sizes, and...well, which fonts will look best on your site. Different browsers interpret fonts in different ways, too. You can find more information to help you make your font decisions below.