Dynamic Web Fonts

You would have many fonts installed on your PC (or Mac, or
whatever it is that you use)– special fonts like various styles of
handwriting, or languages other than English. Your Web page creation tool can
access and use all of them. But once you upload the page on to your Web server,
there’s no way the user can see your creation the way you intended, if he
doesn’t have the same fonts on his machine. For example, suppose you create a
Web page with Tamil text. For your reader to be able to read it, he should have
the same Tamil font installed on his machine.

One way out is to have the font files up on the server, so
that he can download and install them. But then, you need to have fonts for
every operating system, and you also need the rights to distribute them, which
may not always be possible. The way out is to use dynamic fonts.

Briefly, what you do here is create compact downloadable
versions of the fonts installed on your machine, and put them up on the server.
If the user doesn’t have the font in question, then it’s automatically
downloaded. In fact, this is the only way to display non-English pages, without
making the user install the font in question.

Dynamic fonts are seamless to the user, and most font files
are within 25-35 kB. Dynamic font files don’t contain full font information–they
contain only the information needed to display the characters on the page or
site. There are tools available to analyze your installed fonts and to create
their dynamic versions. Here, it’s important to note that not all fonts
installed on your system can be made dynamic.

In this piece, we’ll look at how to use dynamic fonts on
your Web pages. Instructions on how to create the font files vary with the tools
used, and usually accompany them. Dynamic fonts are downloaded into your cache
along with the page that uses them, somewhat like an image file. The font file
remains in your cache for all further visits.

How to use dynamic fonts

Dynamic fonts can only be used with versions 4 and above of
your browser–whether Navigator or IE. To complicate the matter further, the
format for Netscape Navigator is different from that used by IE. While Navigator
uses the PFR (Portable Font Resource) format, IE uses EOT (Embedded Open Type)
files.

Using PFR fonts

You have to create PFR files using tools like HexWeb
Typograph or Extensis Beyond press. Go to www.truedoc.com for further
information on this. CorelDraw 8 and 9 have also been reported to be able to
save fonts in PFR format.

Once you’ve uploaded the PFR file on to the server, you
need to set the MIME type for them on the server. The MIME type is

application /font-tdpfr pfr

You can do this by either editing the server config files or
using an HTACCESS file.

That’s it. All you have to do now is link the font file to
your HTML file by placing the following in the HEAD tag:

You can now use "YourCoolFont" just like any other
font, that is, by defining the FACE attribute in the FONT tag:

Some text

Just remember that the font name is case sensitive. Users of
Navigator 4 and above will now see "Some Text" in "YourCoolFont".

IE users can also view PFR fonts if you include an ActiveX
helper application in your page like this:

The program is roughly 68 kB, and will now download
automatically if not already installed.

If you want to avoid the download for IE users, you can use
the EOT file format.

Using EOT fonts

You can create EOT files using the WEFT tool available from
www. micro soft.com/typography/web/embedding/weft.

Once you’ve uploaded EOT files on to your server, to use
the font in your HTML you must specify the @font-face style sheet element like
this:

The last line points to the EOT file on your server.

You can now use this font as you would use any other font (as
shown in the previous example). However, Navigator users won’t be able to see
your fonts now.

Cross-browser compatible fonts

Here’s a JavaScript workaround for this problem. Place it in the HEAD tag
in your HTML file:

if (navigator.appName == "Netscape")

document.write (" ");

else

{

document.write (‘

’);

}

This script writes the relevant font linking code as appropriate for the
browser. The only downside is that you now need to have two versions–PFR and
EOT–of your files on the server. However, I’m sure that a few kB server
space is worth several more hits to your site.