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 resources.
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, so don't activate more fonts than you need.
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:
Web fonts add a lot of personality. Just remember, don't use too many fonts. Keep your page load time fast and efficient.
