[Contents] [Prev page] [Next page] [Index]

Dynamic HTML in Netscape Communicator
Part 3. Downloadable Fonts

Chapter 14

Using Downloadable Fonts

Font enhancements in Communicator include the ability to incorporate downloadable fonts into your web documents. By using downloadable fonts on your web pages, you can specify whatever fonts you want to enhance the appearance of your pages.

The fonts are contained in a font definition file that reside on the host web server with the HTML document. When the page is accessed by a browser, the font definition file is downloaded with the HTML file in the same way that a GIF or JPEG file would be. The font definition file is loaded asynchronously so that the HTML page doesn't have to wait while the fonts are loading.

The dowloaded font remains on the end user's system only while the page is in the browser's cache. End users cannot copy the fonts for their own future use.

This document contains the following sections:


Creating and Using Font Definition Files

Before you can create font definition files, make sure the fonts you wish to use in your web document are installed on your system. You can get fonts by creating them, purchasing them, or finding free fonts on the Internet. Be aware that fonts are subject to copyright laws, so be sure you have the right to use a font before you incorporate it as a downloadable font in your web documents.

As a first place to look for fonts to buy or download free, you can search the web using keywords such as "font buy"or "font free."

Creating Font Definition Files

When the desired fonts are installed on your system, the next step is to make a font definition file. To do this, you need a font definition file authoring tool, such as Typograph from HexMac, or the Font Composer Plugin for Communicator.

To download a font definition generation tool from HexMac, go to their web site at:

http://www.hexmac.com/

The exact steps for creating a font definition file depend on the tool you are using. For example, in HexMac Typograph, you would open your document in Typograph, and use simple menus to select fonts and apply them to text. You then burn the file, which saves the document, creates a font definition file that contains the fonts used by the file, and also links the font defintion file into the document.

When creating a font definition file, you must specify the domain that is allowed to use these fonts. That is, only web pages served by the specified domain are allowed to download the font file. For example, for fonts to be downloaded with this document, which is served from developer.netscape.com, the domain for the font file is:

//developer.netscape.com

Linking Font Definition Files Into a Document

After you have created a font definition file, you can link it directly into documents either by using a style sheet or by using the <LINK> tag.

The following example links a font definition file using CSS syntax.

<STYLE TYPE="text/css"><!--
    @fontdef url(http://home.netscape.com/fonts/sample.pfr);
--></STYLE>

You can link a font definition file into a document by using a LINK tag whose REL attribute is FONTDEF, and whose SRC attribute is the pathname to the font definition file, as shown here:

<LINK REL=FONTDEF SRC="http://home.netscape.com/fonts/sample.pfr">

The source URL can be any valid URL.

Using Fonts in the Document

After linking a font definition file into a document, you can use the fonts that are contained in the font definition file anywhere in the document. You can either use the fonts as the value of the FACE attribute in the <FONT> tag, or you can use them as the value of the font family style sheet property, as discussed in the section "Font Family" in Chapter 5, "Style Sheet Reference."

The following code creates a style sheet that contains a style definition for all <H1> tags. All <H1> elements will be displayed in the Impress BT font. If that font is not available (for example, the font definition file cannot be located), the element uses the Helvetica font. If that font is not available, the generic sans serif font is used as a last resort.

<STYLE type="text/css">
<!--
H1 {font-family:"Impress BT", "Helvetica", sans-serif;}
-->
</STYLE>

The following example displays an <H1> elemet in the Impress BT font.

<H1> <FONT FACE="Impress BT">This H1 Uses Impress BT Font </FONT></H1>

For a further example of the use of downloadable fonts, open the following page:

fontdef1.htm

You can view the source code for the file fontdef1.htm to see how the fonts are used in the file.

Adding a New MIME Type to the Web Server

When you are ready to make your document available on the web, you need to put the font definition file in the place where the document expects to find it. The font definition file will be downloaded with documents that use it, so long as it is served from the domain for which the font definition file was created.

You will also need to add a new MIME type to your web server if it has not already been added.

Add the MIME type application/font-tdpfr, and specify its ending as .pfr.

Web servers cananot download font definition files unless they know about this MIME type.


New Attributes for the FONT Tag

The <FONT> tag takes new POINT-SIZE and WEIGHT attributes, in addition to the other attributes it already supports.

POINT_SIZE Attribute

The POINT-SIZE attribute indicates the point size of the font. For example:

<P><FONT FACE="BT Impress" POINT-SIZE=18>
This text appears in 18 pt monspace font.</FONT>
</P>

The POINT_SIZE attribute lets you set exact point sizes. (The existing SIZE attribute lets you set the font size relative to the existing size, for example, "+2" or "-2".)

WEIGHT Attribute

The WEIGHT attribute indicates the weight, or "boldness" of the font. The value is from 100 to 900 inclusive (in steps of 100), where 100 indicates the least bold value, and 900 indicates the boldest value.

If you use the <B> tag to indicate a bold weight, the maximum boldness is always used. The WEIGHT attribute allows you to specify degrees of boldness, rather than just "bold" or "not bold,"

For example:

<P>
<FONT FACE="MONOSPACE" POINT_SIZE=18 WEIGHT=600>
This text appears in 18 pt monospace font.It is fairly bold, but it
could be even bolder if it needed to be.</FONT>
</P>

Further Information

For more information about dynamic fonts, see:

http://home.netscape.com/comprod/products/communicator/fonts/index.html

Another information resource is:

http://www.bitstream.com/world/

The following link takes you to a very informative article that contains information and recommendations about buying fonts:

http://www4.zdnet.com/macuser/mu_0696/desktop/desktop.html

The following link takes you to a paper published by the World Wide Web Consortium (W3C) discussing fonts and the web.

http://www.w3.org/pub/WWW/Fonts/



[Contents] [Prev page] [Next page] [Index]

Last Updated: 08/07/97 15:22:09


Copyright 1997 Netscape Communications Corporation