Download our free how-to guide for setting up your new Drupal site and using our themes

Body Text Font

You can easily change the font size and font type of the theme by editing the theme’s style.css file. By default the theme’s font size and font type is set in the body selector of the theme’s style.css file. The body selector can be found at the beginning of the theme’s style.css and looks something like:

body {                        
background: #FFF;
font-family: Arial, Helvetica, Verdana, "Bitstream Vera Sans", sans-serif;
font-size: 80%;
font-weight: normal;
line-height: 160%;
 }

A font size of 100% is equal to 16 pixels. The above font size of 80% is equal to 12.8 pixels. Because the theme uses an em based font sizing scheme, all fonts for theme theme will change according to the percentage you set in the body selector; these include H1, H2, page titles, node titles, block titles and paragraph font sizes.

To figure out what the pixel size of an em specified font size, divide the desired font size, in pixels, by the base font size. For example: the above mentioned font size of 80% is equal to 12.8 pixels and you want a font size of 16 pixels you can get the em size by doing 16(pixels) / 12.8(pixels) which gives you 1.25(em).

The font-family property in the body selector controls the font type or font face; there you can set your desired font type.

A very useful tool to help with testing how a font size and/or font type will look is the Firefox add-on Firebug [ https://addons.mozilla.org/en-US/firefox/addon/1843 ]. With the Firebug add-on you can change the theme’s styles in real time and see how things will look before you make any changes to the theme’s style.css file.