Cheap "Font" Tricks, Part 3

This is the third article in a series of "Cheap Tricks with CSS". This little trick will change the overall cosmetic appearance of your web site by simply changing the font face that is controlled by CSS (cascading style sheets).

Oh no! I think I just heard some shrill screams from all those web designers out there who use ordinary HTML. ;) And I do believe I heard some heavy sobbing from all those web template designers out there who use ordinary HTML. LOL ... not to worry though. Since you are a frequent visitor to BasicTemplates.com and likely a happy member, YOU are using external CSS to control your fonts, because you are a smart cookie, right?

If so, here is the cheap font trick of the week to help you quickly change the look of your site on all pages within seconds.

The most effective way to use CSS throughout your site is by using an external (linked) style sheet. Open the style sheet with any text editor such as Windows Notepad or NoteTab (there are many others). Edit the font-family tag everywhere it appears in the style sheet.

Before:
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

After:
font-family: Georgia;

Now let's compare two pages on our web site. The first page is using the font-family in the first example. The second page is using the font-family in the second example. Pretty cool, huh? Do you see how much different the pages appear? Nice change.

Keep in mind that different font families have size variations. By doing this you may need to change the font-size as well. In this case we did not. If you are using a smart text editor such as NoteTab, the process can be even quicker. (If you can imagine anything quicker and simpler!) by using the "find and replace" function within the software.

Note that if you are using a font-family who's name is more than one word such as "Trebuchet MS", you must use quotation marks around the font-family name as we did in the example above.

Now we ask, why would anyone utilize, purchase or design a web site or template without external CSS?

Related Articles: Cheap "Link" Tricks, Part 1 and Cheap "Link: Tricks, Part 2.