Home arrow DHTML arrow Page 3 - Understanding Embedded Fonts

Be True, My Doc! - DHTML

Gone are the days when Web sites were designed entirely in Arial Bold and Times New Roman. New embedded font technology allows Web developers to embed fonts directly into a Web page, thereby ensuring that it looks the same on all browsers. This article looks at previous workarounds to the problem, together with Microsoft and Netscape's new and competing approaches to the problem.

TABLE OF CONTENTS:
  1. Understanding Embedded Fonts
  2. The How Of Embedded Fonts
  3. Be True, My Doc!
  4. Weft And Warp
By: Vikram Vaswani, (c) Melonfire
Rating: starstarstarstarstar / 4
October 30, 2000

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
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.

 
 
>>> More DHTML Articles          >>> More By Vikram Vaswani, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

DHTML ARTICLES

- Google Gives Buckyball a Tribute Doodle in H...
- Rough Guide To The DOM (part 2)
- Rough Guide To The DOM (part 1)
- Filters And Transitions In IE5
- Understanding Embedded Fonts

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: