Dynamic Fonts: Name's the Same but the Voice Has Changed
by Scott Clark
First published: February, 1998
Change Your Fonts and Change Your Attitude
One of the sweetest things to come out of the HTML 3.0 specification was the ability to use the font of your choice on your Web pages. This ability to use "dynamic fonts," or fonts which are downloaded from the server to your browser, has enabled developers to create and use fonts on their pages which create a whole new look from the same old text. So that you can see that this is just inline text, drag your mouse across the text. You can cut and paste it just like any other text on the page.
On the other hand, this is the text you'll find to be dynamic if you are using MSIE. That's because the manner in which you use dynamic fonts is, are you ready for this, different than the way you do it for Netscape.
Now, before you go uploading your favorite fonts to your Web server, understand that you're not going to be using normal font sets, but rather compacted, formatted font sets. These font sets are created by using special software which does the compacting and formatting, and as of the time this article was written, you need to use two separate tools to create font sets for MSIE and Navigator. The tools are:
Essentially what the software does is to take any font on your system (yes, you still actually have to have the real font on your system) and "burn" a font set to be used dynamically. The HexWeb Typograph simply allows you to choose a system font, and burns a copy having the same name as the font, but with a .pfr extension.
Typograph took the 18K Ren & Stimpy font and burned it to a 6K Ren_&_Stimpy.pfr file. You could also burn several fonts into one pfr file if you're planning on using more than one font on a Web page. Once the font file has been created, you must upload it to your Web server. I've found that you can not reference a font on one server using a Web page which is located on another.
The Microsoft WEFT tool also generates its own file format, this time with a file extension of .eot. WEFT took the same Ren & Stimpy font and created a 5K .eot file. It also has the capability to create one .eot file for all the fonts used in a site, or it can make several .eot files, one for each font set. It looks through the documents you've selected and finds exactly which characters are used. That way it is able to cut down on the file size.
Setting DFonts Up and Coding Them
The next step to using dynamic fonts, if it hasn't already been done, is setting the MIME type for dynamic fonts on your server. The MIME type for dynamic fonts is
application/font-tdpfr
And the file extension is
pfr
On Windows NT servers, the gopher type is "5:REG_SZ:", while the entire key appears as such:
application/font-tdpfr,pfr,,5:REG_SZ:
Depending on the brand of Web server, you may have to enter the extension in uppercase, lowercase or both, and you may have to put a period before the file extension.
So now we've got these special font sets, and they've been uploaded to the server, and the server's been primed with the correct MIME type. (Apparently MSIE4 doesn't need a special MIME type to be set for the server, as it will work without one being set.) Now you'd like to actually use these fonts on your Web pages. Once the MIME types have been set, half the battle's over.
For Netscape, using dynamic fonts is a simple matter of linking to the font set in your header tags thusly:
<LINK REL=FONTDEF SRC="Electrik.pfr">
Then you can refer to the font just like you would any other; in Style Sheets, in FONT tags, i.e.
This will be in the Electrik font face
<FONT FACE="Electrik" SIZE=10>
This will be in the Electrik font face
</FONT>
To do the same thing in MSIE4, you must use Style Sheets to specify the font and where it comes from. First you define the Style Sheet, noting that the last line points to the file that you created using WEFT:
<STYLE>
@font-face{
font-family: Bellbottom;
font-style: italic;
font-weight: normal;
src: url(BELLBOT0.eot); }
</STYLE>
MSIE uses the style sheet font source (BELLBOT0.eot) throughout the page.* Netscape users will only be seeing the font if it is installed on their system.
If you are not seeing the font using MSIE4, it may be an error with the WEFT tool. I had many problems creating a font set using the tool. It's still in beta, and it is not particularly user friendly, but it's all there is.
Microsoft Internet Explorer 4.0 won't render a page until the font objects have been downloaded, decompressed and temporarily installed on the system. One solution that Microsoft has come up with is to display the page using a font which is already installed on the system, and to dynamically replace it with the font stored within the font object. They've even provided the code to do so using JavaScript:
<SCRIPT LANGUAGE="JavaScript">
function createbreak() {
document.styleSheets(i).href="ftembed.css";
}
</SCRIPT>
stylesheets(i) is the element of the stylesheet collection you'll be
replacing. You'll also have to place this code in the HEAD of your document:
<LINK rel=stylesheet href=null>
This is basically all there is to creating and using dynamic fonts on Netscape and MSIE. For some great font resources, check out the following pages:
I hope this font tutorial has been helpful. If you have any font resources, please pass 'em on!
|
eBook library