Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

  • Print
  • + Share This
  • 💬 Discuss

Working with Font Styles

Font stacks determine which fonts a browser displays on your webpage. A browser uses the first font in the stack that is installed on the user’s system. If none of the fonts in the stack are installed, the browser displays the text as specified by the user’s browser preferences.

In Dreamweaver, all font control is provided via CSS, and you access it through the CSS tab of the Property inspector red-a.jpg. There, you’ll find controls for the font family, the font style, the font weight, the font size, and the font color. These controls have changed somewhat in Dreamweaver CC. The two main changes are in the font family pop-up menu and the addition of the font weight pop-up menu. The Font pop-up menu now includes an entirely new set of font stacks (which previous versions of Dreamweaver called font groups) that Adobe says is more up to date in including standard fonts installed in Windows, OS X, and Linux. Font weight is specified in a range of 100 through 900 and specifies the heaviness of the font; Adobe has created a table of common font names and their numeric weight equivalents, which is reproduced in Table 4.4.

04fig30.jpg

red-a.jpg You’ll find Dreamweaver’s font styling controls in the CSS tab of the Property inspector. We’ve labeled this figure with each of the CSS properties and their controls.

Table 4.4. Font Names and Numeric Equivalents

Font Name

Numeric Equivalent

Thin, Hairline

100

Extra Light

200

Light

300

Normal, Book

400

Medium

500

Semibold, Demibold

600

Heavy, Extra Bold

700

Black

900

To apply font styling

  1. In Design view, select the text to which you want to apply the font stack.
  2. In the CSS tab of the Property inspector, choose the font stack you want from the Font pop-up menu red-b.jpg.

    04fig31.jpg

    click here to view image

    red-b.jpg Apply a font stack using the Font pop-up menu.

    The text will change to take on the appearance of the first font in the font stack that is installed on your system.

  3. Make changes as needed to the font style, weight, size, and color values. Note that the font size unit values pop-up menu becomes active only if you first change the default value for font size.
  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus