Embedding Custom Font Types into your Web Page
------------------------------------------------------------
The font-face @rule is used for a detailed description of a font and can embed an external font in your CSS. It requires a font-family descriptor, which the font can be referenced to, the value of which can be an existing font name or it can be a completely new font name. To embed a font, use a src descriptor is used. Other descriptors added to the font-face at-rule become conditions for that embedded font to be used. For example, if you were to add a font-weight: bold style to the @rule, the src of the font-family will only be applied to a selector with the font-family property if the font-weight property is also set to bold.

@font-face {
font-family: somerandomfontname;
src: url(somefont.eot);
font-weight: bold;
}

p {
font-family: somerandomfontname;
font-weight: bold;
}

or...

@font-face { font-family: somerandomfontname; src: url(somefont.eot); font-weight: bold; } p { font-family: somerandomfontname; font-weight: bold; }

------------------------------------------------------------
Note: Support for the font rule is sporadic, and many browsers dont support it, which includes Mozilla. So, support for embedded fonts is patchy at best. Only Internet Explorer (as of the time of this writing) seems to have any kind of decent support and this is by no means straightforward. To embed fonts with IE, you need to use Microsoft's WEFT software, which will convert the characters of a TrueType font into a condensed OpenType font (and this can then only be used on the URI that you specify). Because of this limited (and quite complicated) compatibility, it is best not to use fonts that do not have an adequate alternative system font.

Microsoft's WERT Software for font conversion: http://www.microsoft.com/typography/web/embedding/weft3/default.htm

------------------------------
White Pacific Software. Copyright (C) 2005 White Pacific Software, www.whitepacificsoftware.com













