Did you ever stumble on a website and wonder how they were able to use that k-rad font on their pages when you can only manage to use Arial, Times New Roman, and monotype on yours? Well, there is a chance that they are using dynamic fonts, also known as font embedding.
Font embedding has been around since at least 1997. As with anything related to web design there are multiple schools of thought on whether or not this is a good idea. Some regard it with nearly the same loathing as the <blink> tag. Others could care less. Using dynamic fonts certainly opens the door for ugly-ass web pages and use of the dreaded <font> tag, but on the other hand it also gives you the opportunity to do some cool designs.
So what do you need to do to use dynamic fonts? First you need to pick your poison. As with so many things related to web design and browsers, there are two competing and somewhat incompatible standards. Netscape and Mozilla-type browsers use portable font resource -- *.pfr -- files, which were created by using a product called WebFont Maker by BitStream. That product, I believe, has been discontinued, so the PFR is probably on the way out. Everybody's favorite 900 pound gorilla, Microsoft, has its own standard that only works with Internet Explorer called the Web Embedding Fonts Tool or WEFT. WEFT compresses TrueType and OpenType fonts into *.eot files.
Assuming you have one of these products and have cooked up a batch of 1337 fonts to annoy and confuse your visitors, how do you use dynamic fonts in your pages? As with so many things relating to web design, there is more than one way.
Either approach points the browser to the .eot or .pfr file stored somewhere on your web server. The CSS approach involves using the @font-face declaration in a stylesheet. It would look something like this: @font-face { font-family: "Novasoy LeetText";
font-style: normal;
font-weight: normal;
src: url(novasoyfonts.eot); } Keep in mind, only Internet Explorer supports this type of declaration.
The other way to use dynamic fonts -- and the only method supported by Netscape/Mozilla browsers -- is by using the HTML <link> tag. The format for this type of declaration follows: <link rel="fontdef" src="novasoyfontz.pfr">
In the interest of cross browser support one should either use both methods or not use dynamic fonts at all.