The font-family menu in the CSS Designer panel offers a selection of font stacks. If the first font listed in the font stack is available on the user's computer, that's what will load. If the font isn't found, the browser runs down the list in order of preference until it finds an available font.
If you don't see exactly the configuration you need, choose "Manage Fonts".
When you use a standard font stack, the browser looks for system fonts on the user's computer. Using system fonts is faster and lighter, since the fonts are already installed and don't have to be loaded as external elements.
Adobe Edge Web Fonts are hosted on an external Web server by Typekit. They need to be loaded in order to display on your web page, just like images and other media are loaded. Using a lot of Web fonts will slow down your page load time, but you can usually get away with one or two.
Use the icons on the left to filter the font selections into fonts recommended for headings (which work well as decorative display fonts) or fonts recommended for paragraphs (which maintain legibility at small text sizes). You can also choose from sans serif, serif, slab serif, or script font categories. After selecting a font, click "Done".
The next time you access the font-family menu, the font you selected will be listed.
Click Live View to preview the font:
Adding an Adobe Edge Web font requires some JavaScript, but Dreamweaver will add it for you automatically. You'll see the script tags in the HTML source code.
The Web font will be listed in your external style sheet:
As a final step, it is a good idea to add a fallback font in case your Web font doesn't load. Access the Manage Fonts dialog again. Choose from your available fonts, clicking the left arrow icon to move your font selections to the font stack. Keep in mind that the fonts on your computer might not be installed on other people's computers. Stick to the standard system fonts: Verdana, Arial, Helvetica, Georgia, Times and Courier. Just two or three fonts will be enough to build your stack.
Click Done and access the font-family menu again. Your custom font stack will be listed.
The Manage Fonts dialog also provides settings for Local Web Fonts, which you can download from Web font providers like Font Squirrel. Using local Web fonts requires some technical savvy, since you'll need to host the font files on your personal Web server and interpret the font licensing agreements yourself. Using Adobe Edge Web fonts is much easier—Typekit will handle the font hosting and the licensing agreements for you.
Web fonts will add a lot of personality to your projects. Just remember, don't use too many fonts. Keep your page load time fast and efficient.
