Replacing the theme fonts

As you've seen, CSS is quite powerful, and minor tweaks can have big impacts. If you are unhappy with the fonts used in your WordPress theme, adjusting them all is easy. Fonts come in all shapes and sizes, and a font change can alter your site's look and feel dramatically.

Keep in mind that not all fonts display properly in all browsers. To compensate, you can designate fallback fonts. If a user's browser cannot render the desired font, it will try the next in line. To be safe, it is important to know that individual fonts come in generic families. All the fonts in a generic family share a similar look:

Generic family

Some individual fonts

General description


Arial, Tahoma, Trebuchet MS,

Sans-Serif fonts lack the lines


and character markings that

Serif fonts have.


Bookman Old Style,

Serif fonts contain small lines

Garamond, Georgia, Times

and markings on the ends of

New Roman

certain characters.


Consolas, Courier New,

The characters in Monospace

Lucida Console, Monaco

fonts all have the same width.

In order to change the font(s) used in your theme, you need to open your stylesheet (style.css). Find the section that looks like this:

font-size: 62.5%; /* Resets 1em to 10px */ font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; background: #d5d6d7 url('images/kubrickbgcolor.jpg'); color: #333;

text-align: center; }

You can change the size of your font by adjusting the value of the font-size property. In the WordPress Default theme, the font-size value is listed as a percentage (62.5%). There are several ways that we can describe font sizes, three of which we list here:

1. In Points — increasing or decreasing the number of points changes the size of the font, such as 12pt (higher is larger, naturally). This is similar to adjusting font size in a word processing program.

2. In Pixels—if you want ultimate control over the font size, you can set it in number of pixels, such as 14px (higher is larger, naturally). There's just one problem: this method has been known not to work with Internet Explorer, though it does work in other mainstream browsers.

3. As a Percentage—raising or lowering the percentage number changes the font size accordingly. 100% is equivalent to 17px.

If you want to replace the default fonts, you can do so by adjusting the value of the font-family property. Our example begins with specific fonts (Lucida Grande) and ends with a generic font family (Sans-Serif). A user's web browser will try the fonts in order, and if the first listed font will not display properly, it will move to the second, and so on, until it finally reaches the generic font family. Beginning designers quickly realize that design is a game of compromise—it is virtually impossible to code in such a way that all users see exactly the same thing. That said, it's better to give the browser a slight influence (in this case, by suggesting a font family) rather than leaving everything up to chance.

Our last font element is the color property. You can replace the default value (#333) with any color that you like. We will learn more about colors in the next section.

At this point, you should be comfortable with the idea of replacing fonts. Feel free to sift through the various other elements of your stylesheet in search of fonts that you wish to adjust, such as the fonts used in your heading tags.

Was this article helpful?

0 0
Make Money Blogging

Make Money Blogging

It is fine to get started on a hosted solution like Blogger.comor They will allow you to learn the basics of blogging and web publishing without spending money. As soon as you nail down these basics, however, it is vital to buy your own domain name and to purchase a web hosting package with some company.

Get My Free Ebook

Post a comment