Using Nonstandard Fonts

You can apply any font available on your computer to the text on your Web page. You can also select any font size or weight you want just as you would for a Word document.

NOTE

HTML does not support using embossing or engraving in font styles?these won't be displayed in any browser.

Remember one important caveat when you choose fonts: The computer displaying any Web page you create must have the same fonts installed as are used on your Web page. If, for example, you choose Andale Mono as your font style under Windows, and your Web page is viewed on a Macintosh computer or under Unix, those viewers will not see the text displayed with the Andale Mono font. Their browsers will look for the font, and when it is not found, the browser will substitute a default font available on that machine. If the Andale Mono font is important to your Web page in terms of spacing or emphasis, note that both of these features will be lost on machines that don't have the Andale Mono font installed.

There are a few workarounds that allow you to use various fonts and have them display across multiple platforms and browser types:

Manually mark up the font tag to support multiple fonts.
Convert text to graphical images.
Embed Web fonts into your Web page.

Each of these options is explained in the following sections.

Manually Modifying the Font Tag

Most computers in use have three basic types of fonts installed: serif, sans serif, and monospaced. Examples of these fonts on the Windows platform include Times New Roman, Arial, and Courier, respectively. If, for example, you apply the Arial font to a line of text, the HTML code will appear as follows:

<font face=" Arial" >

However, on the Macintosh, the default sans serif font is Helvetica, and on many Unix installations, it is simply sans serif. You can manually add these font names to the font tag as follows:

<font face=" Arial, Helvetica, Sans serif" >

The preceding code will ask the browser to check first for Arial and use it if found; if it's not found, to check for Helvetica; and if neither of those is found, to use Sans serif.

You cannot tell Word to support multiple font names when it applies fonts to a Web page. You must make these changes within the HTML source using a global search and replace. Note that the font tag may be written differently within the source depending on whether you're working in a Web page, filtered Web page, or single file Web page (.mht). Again, Word may overwrite any manual changes you make to the HTML source if you later open and save the Web page from Word.

NOTE

Cascading style sheets (CSS files) or embedded style tags can be used to apply font information to text. Any fonts you specify with a style tag or CSS file must still be present on the viewer's computer to be rendered.

Converting Text to Graphics

If you want to use a font that is not commonly found across multiple platforms, you have the option to add the text to your Web page as a graphical element. This completely eliminates the need for any user to have your font on his machine. There are a couple of serious side effects of this approach, though:

If you display a large amount of text as graphics, the Web file size increases dramatically, slowing down page loading for users who have a slow connection.
A search engine cannot index any text converted to graphics. The search engine simply sees an image; it cannot "read" the text.

Using text-as-graphics only for headers keeps your page size down. To make the text of the graphic searchable, you can add the text of your image to a Web page comment or a metatag, or manually edit the image tag to include the title attribute. Examples of these approaches are displayed here:

<!--Add the text of your graphic as part of a comment here -->
<meta name="Description"  content=" Text of your graphic here" >
<img src="images/text.gif"  title=" Text of your graphic here" >

Comments and metatags will not display in a Web browser, but a text indexer can read them. The metatag information must be placed between the <head> and </head> tags in your Web page. Again, all these changes must be made manually in the HTML source.

To create a graphic from text, you can use a bitmap editor such as Paint or Adobe Photoshop. Or you can create your text using WordArt and save your Web page as a filtered Web page. The WordArt is converted to a bitmap (.gif or .jpg) graphic during the save operation (unless you are saving as a single file Web page, in which case the graphic is integrated).

Embedding Web Fonts

Microsoft has developed a means for Web page authors to embed fonts directly into a Web page. When a browser reads a Web page, it accesses the embedded fonts on that page to display the text. So as an author, you no longer have to worry about which machines have which fonts. Using embedded fonts does increase the Web page file size somewhat, and not all browsers, especially older ones, can read the embedded Web fonts.

Creating Your Own Web Page Templates

If you will be creating a lot of Web pages that share some similar elements, such as a navigation bar or a consistently sized table, creating a template can save you from having to re-create those elements each time, thus saving you a lot of time.

A template is a file you use to base new Word documents on. Can you just open a Word document and save it under a new name? Of course. But will you occasionally have a "duh" moment when you forget to save it under a new name and overwrite the original, causing yourself hours of rework? Undoubtedly. The beauty of a template is that it doesn't allow that kind of mistake to ruin your day.

To build a new Web page template, do the following:

From the New Document task pane, choose On My Computer to bring up the Templates dialog box.
Click Template in the lower-right corner.
Open an existing template or a blank Web page, whichever suits your needs best.
Save your template immediately.

NOTE

Notice that when you choose File, Save As from the menu, Word prompts you to save the template as a .dot file. You can use this format or save a template as a Web page (.htm) file.

Your template is saved to the path defined by the User Templates section in the Options dialog box (Tools, Options, File Locations tab). The default for this is the Documents and Settings/username/Application Data/Microsoft/Templates folder on the drive where Word 2003 is installed. You can change that location if desired from the dialog box.
Add whatever items you need to make a basic template. These might include
- A company logo
- One or more tables
- A background texture or color
- Font colors and styles
- A basic text outline
- Standard hyperlinks, such as one to your Web site home page
- AutoText entries
For instance, if your company has established colors and fonts, you could use those in your Web page template. You could use a company color as a background color on your Web pages. Your legal department might require you to include a hyperlink to a disclaimer in small text at the bottom of every page. These are the types of elements to include in a template to maintain consistency through all the Web pages on your site.
Save the template again with the items you just added.