CSS Fonts

There are several font families to choose from here's a list of them and their basic traits:

Serif

These fonts have small strokes at the end of each letter element. They are good for display of larger text but not so good for smaller text on a screen. Examples: Times New Roman, Georgia, Garamond

Sans serif

These are fonts without serifs. They work better for smaller text on the screen. Examples: Verdana, Arial, Tahoma, Helvetica

Monospace

These fonts may or not have serifs. They are distinguished by the fact that each letter occupies the same amount of space. These fonts are better for text that has to be exactly read, such as programming code. Examples: Courier, Letter Gothic, Arial Monospace

Cursive

These fonts mimic cursive handwriting. They can be highly decorative. They are not really good for large chunks of text. Example: Caflisch Script, Sanvito,

Fantasy

These fonts are decorative and do not fit into any of the preceding categories. They can be extremely decorative or reserved for icons. Example: Gothic, (webdings)

In all the definitions above, I declared the generic family as an inline style for its description. I've left it up to your browser to select the actual font. So as long as you have at least one font from each family you should have some idea what each looks like. With the Cursive and Fantasy I've included a photo of some of the more extreme versions just in case your browser chooses a less exemplary font.

Now maybe it's important to you that the page be viewed with a specific font. In this case you can try to have it downloaded to the visitors computer.

I say "try" because there are several obstacles in your way. In order for a font file to be embedded into a page, they have to be converted to an embed file type. Once again the two main browsers in "the browser wars" have each created their own way to do this. A font is also an operating system resource and not a browser resource. This presents some security issues that may keep your font from being used. Some fonts have embedding permissions encoded within them because the designer doesn't wish their font to be embedded. There is also copyrights to be considered. Make sure using a font won't violate any copyright laws or get a program to make your own fonts to avoid this whole issue.

For creating embedded files, Netscape® has licensed the technology from Bitstream® called TrueDoc©. This creates a file called a "Portable Font Resources (.pfr)" file. This technology has recently been updated to to be usable by both Netscape® and Internet Explorer®. It isn't free though. If you would like to check it out, click here to visit their web site.

The code for embedding one of these files goes like this:

Microsoft's version is an "Embeddable Open Type (.eot)" file. It's created using Microsoft's free "Web Embedding Font Tool (WEFT)". It's proprietary and only works with Microsoft browsers. Click here to check it out.

The code for embedding one of these files goes like this:

As you can see it isn't the easiest thing to embed a font on your web site. You could avoid the whole issue by making all your text an image but this could greatly increase your web page sizes if it's any larger than the font file. But then again, you know visitors would see it as it was meant to be.

Enough on this topic. If you would like to know more go to the two web sites I've provided links for above and take it from there.