How to Create a One-Column Page with Twenty Ten WordPress Theme
How to View the Template Files in a WordPress Theme
How to Upload Header Images in Twenty Thirteen WordPress Themes

How to Change Fonts on Your WordPress Blog

You can change the fonts in your WordPress theme for style or readability. Typographic (or font) design experts use simple font variations to achieve amazing design results. You can use fonts to separate headlines from body text (or widget headlines and text from the main content) to be less distracting.

Font Properties Common Values CSS Examples
font-family Georgia, Times, serif body {font-family: Georgia; serif;}
font-size px, %, em body {font-size: 14px;}
font-style Italic, underline body {font-style: italic;}
font-weight bold, bolder, normal body {font-weight: normal}

The web is actually kind of picky about how it displays fonts, as well as what sort of fonts you can use in the font-family property. Not all fonts appear correctly on the web. To be safe, consider sticking to some commonly used font families that appear correctly in most browsers:

  • Serif fonts: Times New Roman, Georgia, Garamond, Bookman Old Style

  • Sans-serif fonts: Verdana, Arial, Tahoma, Trebuchet MS

Changing font color

With more than 16 million different HTML color combinations available, you can find just the right color value for your project. After some time, you’ll memorize your favorite color codes. You may find that knowing codes for different shades of gray helps you quickly add an extra design touch.

Color Value
White #FFFFFF
Black #000000
Grays #CCCCCC
#DDDDDD
#333333
#E0E0E0

You can easily change the color of your font by changing the color property of the CSS selector you want to tweak. You can use hex codes to define the colors.

You can define the overall font color in your site by defining it in the body CSS selector like this:

body {
color: #333333;
}

Changing font size

To tweak the size of your font, change the font-size property of the CSS selector you want to change. Font sizes are generally determined by units of measurement, as in these examples:

  • px: Pixel measurement. Increasing or decreasing the number of pixels increases or decreases the font size (12px is larger than 10px).

  • pt: Point measurement. As with pixels, increasing or decreasing the number of points affects the font size accordingly (12pt is larger than 10pt).

  • em: A scalable unit of measurement that is equal to the current font size. For example, if the font size of the body of the site is defined as 12px, then 1em is equal to 12px; likewise, 2em is equal to 24px.

  • %: Percentage measurement. Increasing or decreasing the percentage number affects the font size accordingly (50% is the equivalent to 7 pixels; 100% is the equivalent to 17 pixels).

In the default template CSS, the font size is defined in the <body> tag in pixels, like this:

font-size: 12px;

When you put all three elements (font family, color, and font size) together in the <body> tag, they style the font for the overall body of your site. Here’s how they work together in the <body> tag of the default template CSS:

body {
font-size: 12px;
font-family: Georgia, "Bitstream Charter", serif;
color: #666666;
}

Serif fonts have little tails, or curlicues, at the edges of letters. Sans-serif fonts have straight edges and are devoid of any fancy styling.

When you want to change a font family in your CSS, open the stylesheet (style.css), search for property: font-family, change the values for that property, and save your changes.

In the default template CSS, the font is defined in the <body> tag like this:

font-family: Georgia, "Bitstream Charter", serif;

Borders

Using CSS borders can add an interesting and unique flair to elements of your theme design.

Border Properties Common Values CSS Examples
border-size px, em body {border-size: 1px;}
border-style solid, dotted, dashed body {border-style: solid}
border-color Hexadecimal values body {border-color: #CCCCCC}

Additional CSS resources

The time may come when you want to explore customizing your theme further. Here are some recommended resources:

  • WordPress Codex: Official WordPress documentation

  • W3Schools: A free and comprehensive online HTML and CSS reference

  • WebDesign.com: A premium library of WordPress video tutorials and training

  • Smashing Magazine: Gives numerous tips and tricks for customizing a WordPress theme

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Search for WordPress Plugins from the Dashboard
How to Upload a New WordPress Plugin
How to Browse and Install Themes from the WordPress Dashboard
How to Install WordPress Plugins within the Dashboard
The Settings Pages for 3 Popular WordPress Plugins
Advertisement

Inside Dummies.com