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.
