CSS and the Font Family

There is nothing worse in Web design than to see multiple fonts on the same page where there should only be one. Even worse than that is spending hours selecting the perfect font for each section and subsection of your site only to find out that the majority of Internet end-users don't have "Bauhaus 93" or "Franklin Gothic Medium Cond" on their machines. Foiled again? Not so fast... how about a quick introduction to the font family. When coupled with the design refinement provided by CSS, integrating a font family can help you make sure that your design remains as consistent as the initial design you envisioned.

A 'font-family' is a group of fonts that exhibit similar characteristics. The properties of a font-family indicate a list (based on order priority) of specific or generic font family names to use ir order to display text content. If you use the old <FONT = ""> then at least one specific or general font family must be given - otherwise your design will feature the default font of the machine they are viewing your pages from. When using a font-family, if the specified font does not exist then the next font is tried. This process continues through the prioritized list until no more are available. If no match is made, the browser default font family should probably be used.

1) Font Family without CSS:

Within your page code you will see...

<P>The <FONT FACE="Arial, Helvetica, Geneva" Size="+1"><a HREF="/">Website Services Magazine</a></font>website is a publication that also features<FONT FACE="Arial, Helvetica, Geneva" Size="+1"><a href="http://websteservices.com/">free classfieds</a></font>and a<FONT FACE="Arial, Helvetica, Geneva" Size="+1"><a HREF="/forums/">forum for webmasters".

Which readers see as:
The Website Services Magazine website is a publication that also features free classifieds and a forum for webmasters.

2) Font Family With CSS:
When using a CSS file (cascading style sheets), not only will your code look cleaner but it makes it much easier in the future when you are "re-designing" your website wherein you may want to change fonts or font sizes, even font families in some instances.

Add the following to your CSS file:

.paragraph-red A
{
font-family:sans-serif;
font-size:110%
}

Within your page code you will see...

<P class="paragraph-red">
The <a HREF="/">Website Services Magazine</a>website is a publication that also features<a href="http://websteservices.com/">free classfieds</a>and a<a HREF="/forums/">forum for webmasters".

Which readers see as:
The Website Services Magazine website is a publication that also features free classifieds and a forum for webmasters.

Good Luck!