Changing Fonts on Your Drupal Site - dummies

Changing Fonts on Your Drupal Site

By Lynn Beighley, Seamus Bellamy

The style.css file contains the rules for the color, style, and size of fonts for your Drupal theme. Here’s a rundown of some of the coding used to control the appearance of fonts that you see in style.css:

  • font: This tag appears only once in style.css and specifies the font to use for the entire site.

  • font-size: Controls how large or small the text is.

  • font-weight: Used to set text to bold.

  • font-style: Primarily used to set text to italic.

  • text-decoration: Controls whether a link is underlined.

  • color: Sets the color of text.

The following code lines show a few major text settings in style.css that you may want to change.

body { font: 76%/170% Verdana, Arial, Helvetica, sans-serif; color: # 000000;}

Two things are going on in this line. The attribute color controls the text color for the entire site, setting it to black. If no other rules change the color later in this file, it shows up as black on the site. This specification controls the color of all the content text all over the site.

The font setting, 76%/170% Verdana, Arial, Helvetica, sans-serif, sets both the text size and font. If you want to use a different font and larger text, you can change this line to read as follows:

font: 100% Times New Roman, Georgia, Serif;

This changes the font for the entire site, as you can see in the following illustration.


The font is larger — and is now Times New Roman instead of Verdana. In the example, the smaller font size and Verdana for the style, was chosen so this line was changed back to font: 76%/170% Verdana, Arial, Helvetica, sans-serif;.

a { text-decoration: none; font-weight: bold; }

The text-decoration controls whether links on your site are underlined. In this case, they are not. The font-weight makes the site links boldface.

a:hover { text-decoration: underline; }

When you move your mouse cursor over one of the links on the site, the underline appears. When you move your cursor off, it disappears. Any time you see hover, it’s referring to the cursor being moved over something and paused there.

#branding { color: #000; }

If the color is changed #000, the color becomes black and looks better against the yellow background.


When changing CSS code, be careful to keep the punctuation marks exactly as they are. For example, make sure each line in the block of code ends with a semicolon.

style.css belong to what elements on your site. But there’s an easier way. You can use the Firefox web browser and install the add-in called Firebug. Doing so opens a pane in the web browser and shows you what styles the elements on your web page are using.

In the following illustration, you see which line in style.css is controlling the appearance of the site name in the header. At the bottom-right of the browser, you can see where in the CSS code the formatting is set. Find out more about Firebug at

image2.jpg is an extremely thorough guide.