Blogger Template Hacks: Changing Fonts

When I created this blog, I accepted the default font specified in Doug Bowman's Minima template design: an attractive serif typeface called Georgia. I thought it was time, however, for a minor facelift to tie in more closely with WebLens' look and feel. Fortunately, changing fonts is quick and easy with the CSS built into Blogger's templates. Here's how, for those new to this:

1. Open your Blogger template and find the CSS for the Body tag.
2. Between the opening { and closing } parentheses, add the following code:
   font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
3. If there are other font declarations for the body tag, make sure they don't specify a different font. In the original Minima template, for example, the body style contains this code:
   font:x-small Georgia,serif;
   I removed the word Georgia and left the size specification as is. (If you wish, you could roll the two statements into one, for more compact code. It would look like this:
   font:x-small "Trebuchet MS", Tahoma, Arial, sans-serif;)
4. To vary the font size, try changing the size declaration. xx-small will reduce the size; small or medium will increase it. These are relative font sizes, which means that they will scale based on the user's default settings. There are many other ways to specify font size, such as %, ems, and pixels, but we'll save this discussion for another time. (Be careful here: changing font size can lead to overflow problems.)
5. Save your changes and re-publish your blog.

That's all there is to it. The steps described above will apply the specified typeface globally to your entire blog. If you wish to make the change selectively — to headings or sidebars only, for example — locate the CSS for the element you wish to style and insert the code there instead.

Some Font DOs and DON'Ts

The code snippet above illustrates the recommended way to specify a typeface for the Web. Suggesting alternates allows you to control which typefaces people's computers substitute if they don't have the first font specified among their system fonts.

Using a relative font sizing unit, like the keywords small and x-small shown above, is also recommended since this gives users control. Specifying absolute font sizes — in pixels, for example — deprives users of the ability to change font size, leaving your page not very useful for those with impaired vision or aging eyes.

Font Lingo

For those unfamiliar with typesetting terminology, the terms serif and sans serif derive from Latin, and refer to the presence or absence of the little "feet" you see on each character in a serif typeface such as Georgia or Times. A sans serif typeface lacks these, making for a cleaner look. Sans serif type is often recommended for onscreen viewing. (The embedded screenshot illustrates how this blog looked before this post. You can decide which you like best.)

Hope you found this post useful. If so, please support Random Bytes with a link from your blogroll. Sign up for our feed for more on this topic.