- Adding Text
- Cutting, Copying, and Pasting Text
- Dragging and Dropping Text
- Using Paste Special
- Applying Headings
- Applying Character Formats
- Applying HTML Text Styles
- Using Preformatted Text
- Adding Line Breaks
- Indenting and Aligning Text with HTML
- Working with Lists
- Inserting Special Characters
- Working with Font Styles
- Using Web Fonts
- Adding Automatic Dates
- Finding and Replacing
- Finding Text with a Simple Search
- Performing Advanced Text Searches
- Finding and Replacing in Source Code
- Finding and Replacing with a Specific Tag
- Using Regular Expressions for Searching
- Checking Spelling
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 . 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.
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
- In Design view, select the text to which you want to apply the font stack.
In the CSS tab of the Property inspector, choose the font stack you want from 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.
- 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.