So, You Want Dynamic Fonts, Huh?

Silverlight 2 SDK for Visual Studio 2008
This package is an add-on to the RTM release of Visual Studio 2008 to provide tooling for Microsoft Silverlight 2 Beta 1. It provides a Silverlight project system for developing Silverlight applications using C# or Visual Basic. »

Article: What Does it Take to Build the Best RIA?
With the proliferation of Rich Interactive Application (RIA) platform choices out there, you no longer have to take a one-size-fits-all approach to developing your next RIA application. Knowing the strengths (and weaknesses) of each platform can help you to decide the best RIA for your next application. »

Expression Blend 2.5 Preview
Use Expression Blend 2.5 to create and modify managed Silverlight 2-based applications. Expression Blend for Silverlight 2 includes all of the features in Expression Blend 2 but has not reached the quality level of Expression Blend 2 for WPF or Silverlight 1 development. »

The Hottest Mobile Platform Meets the Hottest RIA Platform
With the Symbian OS now supporting Microsoft Silverlight, mobile developers can bring new and exciting capabilities to handsets all over the globe. Find out why developers now need to make mobile devices a core part of their RIA development strategy. »

Article: Leveraging Your Flash Development with Silverlight
You're not giving up Flash any time soon (and we don't blame you.) But if you could get your Flash application working in Silverlight, why wouldn't you? We show you the tools and techniques required to have your rockin' Flash application rolled for Silverlight. »

HTML GOODIES TO GO NEWSLETTER

Use these to jump around or read it all...
[Dynamic Fonts [PFR Fonts]
[Get the Fonts]
[Using the Fonts]

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=" format and 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.com suggest 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.com and 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:

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:

LINK sets up a link to something
REL is the relation of the link to the document
FONTDEF tells the document this is a font definition
SRC tells 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:

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 Sheet formats you've seen a million times before:

<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!

[Dynamic Fonts]
[PFR Fonts]
[Get the Fonts]
[Using the Fonts]