Creating a New Font Family Group in Expression Web

You can apply a set of fonts (font family) to text in a web page instead of a single font, This will increase the likelihood that your site visitor's system will have one of the fonts that you specify. You can modify the default font families in Microsoft Expression Web or create you own. Expression Web comes with some pre-configured font-family groups.

Font stacks

The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font. There are two types of font family names:

1. family-name - The name of a font-family, like "times", "courier", "arial", etc.
2. generic-family - The name of a generic-family, like serif, sans serif, monospace, cursive/script, and decorative or fancy fonts.

Start with the preferred font you want to use. Next add the next best font and another similar font. Always end with a generic family. This will let the browser pick a similar font in the generic family, if no other fonts are available. These are sometimes called font stacks.

Resources for learning more on font stacks:

• Guide to CSS Font Stacks: Techniques and Resources
• 8 Definitive Web Font Stacks
• CSS font stacks - video

To add a font family

Step 1: On the Tools menu, click Page Editor Options. Select the Font Families tab.

Step 2: To create a new font family, select New Font Family which should be selected by default.

Step 3: Place your cursor in the box next to the Add button. As you start typing the font name, Tahoma, you will jump to that place on the list. Click Add. Type the next font, Helvetica, which is a MAC font and one you are not likely to have on your system. Click Add. Repeat this step for each font that you want to add to the selected font family. Make sure you end with the generic font family, sans-serif. Click OK to close the dialog box.

Step 4: Your newly created font-family will be available from the New Styles dialog box, the Modify Styles dialog box, the CSS Properties Task panel, and in the Formatting and Common Toolbar font dropdown.

Copyright © 2010 Pat Geary of Expression Web Tutorials & Templates All Rights Reserved
Written May 2010