Varian's Dreamfonts: Web Fonts Reference

Tech & Troubleshooting

When designing your page, do so as usual first, leaving the <FONT FACE> out of it. After the page is designed and you've selected the font you want to use, choose the alternates you'll also be including in the tags. If a person doesn't have your chosen font installed, alternates provide additional chances that they might have something similar -- or at least something nicer than Times New Roman. Preview your page from your last alternates first, such as <FONT FACE="Arial, Helvetica"> (which accounts for both Win and Mac platforms). You've already seen the page in Times New Roman as you prepared it, so viewing these alternates will show you how the "last chance" will appear. If that seems satisfactory, add the next alternate to your tags. This would be your "middle" choice, such as <FONT FACE="Squire, Arial, Helvetica">. Preview it again.

TYPICAL DEFAULTS	WINDOWS	MACINTOSH
Monospace	Courier New
Proportional Sans-Serif	Arial	Geneva, Helvetica
Proportional Serif	Times New Roman	New York

Now add your chosen face to complete the tags, such as <FONT FACE="FeatherLight, Squire, Arial, Helvetica">, and preview the page from the 4.0+ versions of both Netscape Navigator and Microsoft Explorerbefore you place the page onto the Web. This step-by-step process is a minimum ideal and may not be possible for all persons to follow through with all the time, but if you can, it will help assure you that your page will appear decently, even if your primary font selection is not installed on a visitor's system.

Another preview check that I consider part of the minimum ideal is to load the finished page into a fonts-incapable browser such as Netscape v.2.0 or Mosaic 3.0. This can reveal many startling and unexpected aspects at times, but once you're aware of them, you can format your page such that it works around the little "surprises."

What do you do when a font doesn't display? First, recheck your code.

At least one thing you won't need to worry about is case. Font names seem to be case-insensitive; i.e.: "comic sans ms" appears to be equal to "Comic Sans MS" or "COMIC SANS MS." Spaces, however, do count and must be included for your font to be accessed properly. "ComicSansMS" or "ComicSans MS" will not deliver the effect you want in all supporting browsers.

Is the font name spelled correctly? I'd hate to tell you how many times I've caught myself requesting something like "Comic Sands MS," then wondering why the font doesn't show up. That was one of the reasons I began keeping the QuickViews reference, so I could write out the font names (and choose alternates) once, then just copy/paste as needed. You'll also want to check for errors in the HTML code itself, such as a missing comma.

Has the font been referenced properly? Many fonts have more than one "name" they may be known as, but only a single name is going to help the browser locate it, and it's most often not the TTF filename. When you look at your font listings (for Win95 systems, usually in C:\Windows\Fonts) the common name displayed in the list there may present a clue, but often isn't the actual name. You'll need a font properties viewer that permits you to see the name of the font itself, its copyright information and other comments the author added. The actual "Font Name" is the one you want. For example, Bitstream's contribution to the Web fonts category will list as "Geometric Slabserif 703 Light BT" but browsers will locate the face by the font name of "GeoSlab 703 Lt BT." There may be exceptions to this, but I've had the best luck so far relying on the actual font name rather than the listing name.

Finally (this may sound silly but...) check to be sure you have the font installed on your system. Does the font display in a "Fonts Installed" listing? Can you access the font from your favorite word processing application? If not, you may be trying to display a face that's sitting inside a folder with a TTF extension. There seems to be a trend of archiving items in folders like that for some reason I can't fathom. Solution: open the folder and install the actual font file.

If none of these checks solve the problem, move on. Choose a different face to work with. If you really need that particular font for a particular heading, consider a graphic version. There are just some fonts that, for one reason or another, won't display on the Web. Some of them have obvious reasons, such as having a comma or extended character in the font name. Why some others won't display remains a mystery to me at this point. The good news, however, is that there are many, many faces that work wonderfully and except for very specialized styles, you can almost always find a suitable alternate for the ones that don't.

Your Comments Are Appreciated!

Varian's Dreamfonts: Web Fonts Reference is a portion
of Varian's Dreamcatcher
and is Copyright ©2003 by Varian.
All rights are reserved;
none of this material is to be redistributed
on the Web or in any other form
without prior consultation with
and permission from the author.
Exceptions to this statement,
granting additional limited rights
for particular selected elements,
are noted and detailed
in context with those particular elements.

Marking up the WorldWide Web since 1995.