Follow Techotopia on Twitter

On-line Guides
All Guides
eBook Store
iOS / Android
Linux for Beginners
Office Productivity
Linux Installation
Linux Security
Linux Utilities
Linux Virtualization
Linux Kernel
System/Network Admin
Programming
Scripting Languages
Development Tools
Web Development
GUI Toolkits/Desktop
Databases
Mail Systems
openSolaris
Eclipse Documentation
Techotopia.com
Virtuatopia.com
Answertopia.com

How To Guides
Virtualization
General System Admin
Linux Security
Linux Filesystems
Web Servers
Graphics & Desktop
PC Hardware
Windows
Problem Solutions
Privacy Policy

  




 

 

Font Family

font-family sets the over all font to use for the element. You can specify either a specific font, such as Helvetica or Arial, or a generic font-family. You can't tell which fonts will be available on the user's computer, so font-family allows you to list a series of choices, separated by commas. The web browser uses the first font in the list that it understands.

So, for example, the following code (in a STYLE tag or in a style sheet file) indicates that <H2 ...> elements should be displayed in Lucida Casual if that font is available. If it isn't, the browser should try Comic Sans MS.

H2 
   {
   font-family:'Lucida Casual', 'Comic Sans MS';
   }

which gives us this <H2 ...> element:

My Favorite Foods

styles font-families
Interpretations of the five generic font families. Only the first three are widely supported.
In addition to listing specific fonts, you can also list generic font-families. The concept of "generic font-family" requires a bit of explanation. Let me explain with an analogy. A few days ago I was in a coffee shop. Not understanding the array of latte's and cappuccino's I simply requested "something with lots of caffeine and sugar". The person at the counter filled the order with a super-caramel-chocolate-coffee-steamer. Generic font families are like my order at the coffee place... you don't know exactly what fonts are available, so you just give a description of what you want and the web browser displays something that fits.
example of a font that uses serifs and one that doesn't
Serifs are small accentuations added to font characters to make them more readable. Fonts such as Times New Roman and Book Antiqua use serifs. Fonts that don't have serifs are often called "sans-serif" ("sans" is French for "without"). Arial and Helvetica are popular sans-serif fonts.
There are five generic font families, but in practice only three of them are well supported: serif, sans-serif, and monospace. Cursive and fantasy are not understood by most web browsers and should not be relied upon.

Generic font families are all the font control you need in most situations. However, if you particularly want a specific font, the best technique is to combine named fonts with generic font families. For example, you could use several cursive style fonts, ending the list with the cursive generic font family:

H2.multi
   {
   H1 {font-family:'Brush Script MT',Phyllis,'Lucida Handwriting',cursive;}
   }

which gives us an <H2 ...> element like this:

My H2 Element

 
 
  Copyright 1997-2002 Idocs inc. Published under the terms of the Open Content License Design by Interspire