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.