So, You Want Dynamic Fonts, Huh?

Use these to jump around or read it all…

     I get questions on the discussion groups and my email asking how to change the font. Until recently, the only way was to use the “FONT FACE=” formatand set it that way. The problem was that for the user to “see” the font, that font had to be installed on their computer.

     Many people went to a font download site and grabbed some strange looking letters and installed them on their computer. They then created pages using that font. The pages looked great until someone else tried to look at it. Since the second person didn’t have the font installed on their computer – the text was plain.

     I have seen pages that offer fonts as downloads so the pages can be viewed correctly. That’s much the same as suggesting a screen resolution different than current settings. Very few people actually stop, change the screen settings and they reenter the page. Same thing with the font. My guess is that very few downloaded and then installed the font.

     But what if you could offer the font behind the scene? What if the font was simply a file that would download right along with everything else? Then the text would display correctly on all computers. Well, with some exceptions, you can do that right now.

Dynamic Fonts

     Dynamic fonts are font style files that download right along with the page that will use them. Think of them as an image. That’s the basic concept.

     When you use these fonts, the font file will download into your cache just like an image. Once there, as long as you don’t clear your cache completely, the font will be there for all future visits. It is fun to watch the page the first time you use these fonts. The page will come in fully with the text in the default format. Then, once the font, or fonts, download, the entire page reloads and comes to life. It’s a great effect.

     The use of these fonts is basically a Netscape Navigator 4.0 or better deal. However, you can also view the fonts using MSIE 4.0 and above if you also include, along with the font, an Active X helper application. I’ll tell you more about that a little later one after I explain how the fonts actually work.

PFR Fonts

     Now, before you run out to your local font download site, remember that nothing on the Web is quite as easy as it sounds at first. Yes, you can use a dynamic font, but only a certain type of dynamic font. The font has to be in a format known as Portable Font Resource, or PFR. You’ll know a font is in that format because the extension will be “pfr”.

     The next question is most likely, “Where do I get these things?”. I found a few places, but not a lot. Maybe I just didn’t search with the correct key words, but I didn’t find a vast number of places offering the fonts. Here are those that did seem helpful:

http://www.truedoc.com: This is the King Daddy of everything for these fonts. They have downloads, help files and more info than you probably care to read

Bitstream World of Fonts: Good site, but the fonts are pay-fors.

Media Fear: Some downloadable fonts.

VietPage Fonts: Ditto.

     The majority of the fonts I found were made available as long as you always had the font grabbed from the server offering them. Yes, it’s pretty easy to download the font and run it from your own server, but these people are nice enough to offer these fonts, you should do what they ask. The effect is the same as if you were running it from your own server.

      The next, next question is then – how do I make my own fonts? Well, from everything I’ve read, you have to grab a program specifically set to create fonts. A couple of the shareware programs did not have the ability to save in pfr format. If you have a pay-for program that will create fonts, check to see if it has the ability to save in pfr. If not, the people at http://www.truedoc.comsuggest HexMac Typograph and Extensis BeyondPress.

     I ran across an article that suggested that CorelDraw has the ability to save fonts as pfrs. If you have CorelDraw, check out: http://www.mediafear.com/
dreamweaver/help/dynamic_fonts2.html

     If you do make your own fonts, here are the letters you must create:

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 &$?!%

Get the Font

     Let’s say you’ve traveled to http://www.truedoc.comand have found a few fonts you like. I actually like three that they’ve offered:

Amelia
AmeriGarmnd
BakerSignet

     The font names above should be in the font suggested by the name. If not, then your browser version may not be high enough, or the fonts may still be downloading (I’m grabbing three). By now though, they should be up and running.

     In order to use a font, you need to grab it and download it into your browser’s cache. You do that through LINK tags set in the document’s HEAD tags. I grabbed three fonts, so the tags looked like this:

<LINK REL=”FONTDEF” SRC=”http://www.truedoc.com/pfrs/Amelia.pfr”>
<LINK REL=”FONTDEF” SRC=”http://www.truedoc.com/pfrs/AmeriGarmnd.pfr”>
<LINK REL=”FONTDEF” SRC=”http://www.truedoc.com/pfrs/BakerSignet.pfr”>
<SCRIPT LANGUAGE=”JavaScript” SRC=”http://www.truedoc.com/activex/tdserver.js”>
</SCRIPT>

     Notice that each font is being grabbed from the TrueDoc server, as they asked I do. If you use a font that is coming right from your own server, there is no need for the full URL.

     Let’s take a look:

• LINKsets up a link to something
• RELis the relation of the link to the document
• FONTDEFtells the document this is a font definition
• SRCtells the browser where to get the font
• The URL is the path

     Very Important!The names of fonts are case sensitive. Big letters have to stay big.

     Yes, but what about this:

<SCRIPT LANGUAGE=”JavaScript” SRC=”http://www.truedoc.com/activex/tdserver.js”>
</SCRIPT>

     Remember I said earlier that in order for this to work on MSIE, you would need an Active X program. This is it. It’s 68K and it has to be offered if MSIE users are to get in the game. By doing it this way, you are basically completing a step for the user. Microsoft offers a plug in of their own at their MSIE page. You can go grab it and install it if you’d like. However, doing it this way finishes the process for the user. They will be asked if they wish to download the Active X helper. That means a gray dialogue box pops up that often scares people, but there’s no getting around it.

     If you’re interested, Microsoft also offers a “Font Smoother” at http://www.microsoft.com/typography/
grayscal/smoother.htm. It helps to make your fonts look…well…smoother.

Using the Fonts

     OK, you’ve got the fonts downloaded into the cache. Now you need to incorporate them into the page. This is the easy part. At this point in time the fonts act like they were already on the system to begin with, because in reality, now they are on the system.

     Follow these basic FONT and Style Sheetformats you’ve seen a million times before:

<FONT FACE=”Amelia BT”>Text Text</FONT>

<STYLE TYPE=”text/css”>
P {font-family: “AmeriGarmnd BT”;}
</STYLE>

     However you incorporated fonts before, you can now use these to get up and running. Just do yourself a favor when you choose a font from a download site. Make a point of looking at their sample code. It often differs slightly. Notice above that “BT” that is in the command? That isn’t in the download name. Pay attention to that.

That’s That

     That’s the basic concept. Finding the font you like may very well be the hardest part of all of this dynamic font stuff. Good luck with it.

Enjoy!