Skip to Main Content

CSS and the Font Family

Posted on 11.20.2005


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 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...

The Website Services Magazinewebsite is a publication that also featuresfree classfiedsand aforum 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...


The Website Services Magazinewebsite is a publication that also featuresfree classfiedsand aforum 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!

 

Free Subscription to Website Services Magazine
WebsiteMagazineMiniLogo

Leave Your Comment

Login to Comment

Become a Member

Not already a part of our community?
Sign up to participate in the discussion. It's free and quick.

Sign Up

 

Leave a comment
    Load more comments
    New code
  •