Understanding Embedded Fonts - Be True, My Doc!
(Page 3 of 4 )
We'll begin with TrueDoc, the native format supported by Netscape Communicator. Once you've installed the Webfont Wizard authoring tool and started it up, it will ask you to select the font you'd like to embed into your pages. At this point, you can also select the script and style of the font.
Once that's done, you also have the option of selecting which characters to include in the embedded font; typically, it's a good idea to include all alphanumeric characters and punctuation, unless you have a specific reason not to. You will also need to specify the "allowed document roots" that can use this font - for example, if you're planning to use the font on
http://www.melonfire.com, you must specify this URL at this time. As described above, this is a built-in security feature designed to prevent unauthorized use of your fonts on other Web pages.
All done? Hit the "Finish" button and you'll be presented with a Portable Font Resource file, identified by the .pfr prefix. This file contains all the information needed to render that font on a client PC, if it's not already available.
Now that the font file is ready, you need to place it on your Web server, and include some code in your Web page to link to it. Typically, this code is placed in the <HEAD> of the page and looks like this:
<head>
<!-- Start link to PFR -->
<link rel=fontdef src="mfre.pfr">
<!-- End link to PFR -->
<!-- Start Bitstream WebFont Player support -->
<script src="http://www.bitstream.com/wfplayer/tdserver.js"
type="text/javascript">
</script>
<link>
<!-- End Bitstream WebFont Player support -->
</head>
The Javascript code is necessary so that clients
running Internet Explorer are automatically prompted to download the appropriate ActiveX control.
Now, within your page, you can use the <FONT> tag as you would normally - remember to use the correct name of the font, with spaces and capitalization in the right place!
<html>
<head>
<!-- Start link to PFR -->
<link rel=fontdef src="mfre.pfr">
<!-- End link to PFR -->
<!-- Start Bitstream WebFont Player support -->
<script src="http://www.bitstream.com/wfplayer/tdserver.js"
type="text/javascript">
</script>
<link>
<!-- End Bitstream WebFont Player support -->
</head>
<body>
<font face="Staccato222 BT" size="+1">Am I looking good today or
what?</font>
</body>
</html>
Now, when you browse to this page, you should be able
to see the Staccato222 BT font in all its glory...even if you don't own a copy yourself!
You can include multiple <LINK> tags in a single page in case you have more than one font to download. Fonts download in much the same way as images, which means that you might first see body text in the default font, which will then be re-rendered once the .pfr file has downloaded to your PC. Once the file has been downloaded, it remains in your browser's cache until deleted.
This article copyright Melonfire 2000. All rights reserved. Next: Weft And Warp >>
More DHTML Articles
More By Vikram Vaswani, (c) Melonfire
