Spread the Word

Site Feed



Powered by FeedBlitz

Subscribe with ...

  • Add this blog to my Technorati Favorites!
  • Subscribe in Bloglines
  • Subscribe in NewsGator Online
  • Subscribe in Rojo
  • Add Random 

Bytes (WebLens Blog) to Newsburst from CNET News.com
  • Add to Google
  • Add to My AOL
  • Subscribe in FeedLounge
  • Add to netvibes

Translate This Post

Burn a Feed

Ping the World

Monday, May 15, 2006

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.

4 comments:

Daisy Dexter Dobbs said...

Hi Pam! I just wanted to let you know how very much I enjoy and value your informative, well-written blog. Looking through your posts has helped me tremendously. I’ve found many easy to understand tips and suggestions I haven’t found elsewhere (“easy to understand” being the operative phrase here LOL). I’ll certainly be back often to browse through your archives.

I just redesigned my blog after testing out about 5 different layouts last week. I did a lovely 3-column using your template and tweaking it a bit (I was very proud of myself!) However, several readers told me that the 3rd column began at the bottom of the page and was empty at the top. *sigh* So I scrapped that and tried again. I had no idea that what looked fine on my screen could look like a jumbled mess on someone else’s if they’re using a different browser or have a different operating system. Hopefully the current layout displays adequately for most readers.

Anyway, Pam, I talk about your wonderful blog in my current post, “Caution--You’re Entering The Daisy Zone,” including a link to Random Bytes and encouraging my readers to check you out. I’ve also posted a link to your blog on my sidebar under “more favorites.”

Thanks again!

Pam said...

Hi Daisy. Thank you so much for your kind words here, and especially for the great review and blogroll link from your own blog. It's much appreciated.

Sorry you're having trouble with the 3-column layout. I see this wrapping issue all the time on people's blogs. It's hard to test for every browser out there, but the 3-col layout I built works fine under IE 6.0 and 5.x, and Firefox. It's always a good idea to test in different browsers, at different screen resolutions, different window sizes, and different screen font sizes. The template has been tested for all of these variables, but not for every browser out there!

If the third column wraps, you can try expanding the overall width by a couple of pixels, or decreasing the widths, padding, or margins of any of the columns. The problem is due to cross-browser incompatibilities in how the cumulative horizontal width (individual column widths, padding, and margins) is calculated. Hope this helps.

_writer said...

Thanks for these wonderful Font Instructions. I can't tell you how long I fiddled with "Minima" and searched for simple instructions to change fonts in this template.

No surprise a writer has the clearest instructions I've found on The Net.

I still can't change Mimina to "Times New Roman" and set this font to italic, no doubt due to my continuing aversion to HTML Coding, but atleast the "body tag" alteration, mentioned in your instructions, allows my site to have a more legible font.

Any advice welcomed.

Julie said...

Thank you for posting this. You just solved a 4 hour issue I have had with my new template. ha! I appreciate it.