GDES218 Graphic Design for the Web

Transcription

1 Using the Web Font in Dreamweaver CC Now that you have a custom font, you will use the Dreamweaver CC Manage Fonts feature to make adding the font to your pages as easy as adding a font from your own computer. Open a page to which you want to add the font. This tutorial uses the midterm project and modifies the headings. (Many designers use web fonts just for headings rather than all the body text, which might slow down the site.) 1. Select Modify > Manage Fonts. 2. Manage Fonts opens and displays Adobe web fonts on its initial tab. 3. Select the Local Web Fonts Tab; this is the screen you use to add web fonts from your computer. 1

2 4. Skip over the Font Name field and click the folder next to the EOT font field. 5. Navigate for the Kit folder. 6. Locate the EOT version of the font. You will have to drill down through some folders in the kit to get to the formats. 7. Click Open. Dreamweaver populates all the other fields with the appropriate fonts and even adds the font name to the name field! 8. Make sure you select the checkbox that assures Dreamweaver you have a license to use the font for web embedding purposes. 9. Click Add. Dreamweaver adds Amadeus to the Current list of Local Web Fonts. 2

3 10. Click Done. Your font is now ready to use in any site. Adding the Font to a Page 1. If you don t already have rules for your headings, use the CSS Designer to create them. In the example below, the h1 and h2 headings are in a div with a class of content. The rules for both are grouped as for this exercise they are using the same font family as well as other properties:.content h1,.content h2 2. Select the Text icon under Properties. 3. Click the grayed out default font text next to the font-family field. 4. Click Manage Fonts at the bottom of the font stacks and custom fonts list. 3

4 5. The Font Manager dialog box displays. 6. Click the Custom Font Stacks tab. Under Available Fonts you ll see a list of all the fonts on your computer. Because you added the Amadeus font via the Mange Fonts dialog box, it too should appear. Web fonts appear at the bottom of the list with the generic font categories such as cursive, fantasy, serif, sans-serif, and mono. 7. Select the Amadeus font and use the left-pointing double-arrow button to move it over to the Chosen Fonts column. 8. Select a more common font to add to the stack. 9. Finally, end with the generic sans-serif font. If someone has an older browser or does not have a CSS enabled browser, at least the browser will substitute a relatively similar font of some kind. 10. Click Done. 4

5 11. Dreamweaver returns to the Text screen where you can select the new font stack from the drop down list next to the Font-family field. When you look at the page in Design View, you will see the generic sans-serif font or whatever font you selected from your own computer. Dreamweaver s Design View does not Click the Live View button to see the Amadeus font. One final thing to remember is that you will need to upload the webfonts folder with the custom font folder inside. The font style sheet will be in the folder, in the correct path in relationship to the page, and is imported into the head of the document. This is a critical component in ensuring that the font works as expected on the Internet. Using Adobe Web Fonts If you have a CC subscription, you can use TypeKit and Dreamweaver s Adobe Web Edge Fonts. 1. Select Modify > Manage Fonts. 2. Select the first tab Adobe Edge Web Fonts. 5

6 3. Select a font category on the left. 4. Select a font you would like to use. Dreamweaver will place a checkmark next to it. 5. Select the third tab Custom Font Stacks. 6. Create a font stack just like you did for the Font Squirrel font. 7. Add the font stack to the appropriate text elements. 6