Using Web Fonts in Adobe Dreamweaver CS6
Note: This excerpt is from the forthcoming book Dreamweaver CS6 Visual Quick Start, ISBN 9780321822529.
From the book
From the book
From the book
One of the big constrictions on the freedom of Web designers has always been the limited range of fonts they could use on pages. Because there are so many browsers running on so many different platforms, designers were more or less forced to use a very restricted set of fonts (often known as Web-safe fonts) that were most likely to appear on Windows, Mac, Linux, and mobile devices. Microsoft’s set of Web-safe fonts, including Arial, Verdana, Times New Roman, and Trebuchet, gained widespread use. They’re fine, but they’re boring.
Once again, CSS3 comes to the rescue. The @font-face rule allows you to use non-Web-safe fonts by defining the location of a font resource, which can be either local to your machine or external. As of CS 5.5, Dreamweaver supports @font-face, and Google now makes a wide selection of attractive fonts available at http://www.google.com/webfonts. At that site, you can create a collection of one or more fonts and then either download the collection for use on your own Web server or, even better, use Google-provided code to link to the fonts, which are then served on the fly by Google with minimal impact on page-loading time. Google provides linking code in your choice of HTML, CSS, or JavaScript.
To show you how easy it is to use Web fonts, we’ve created a simple example based on Alice’s Adventures in Wonderland. It shows part of a famous conversation between Alice and the White Queen, with different fonts used for each character’s dialogue A. First, we chose two fonts from Google and used their CSS code as the basis of our CSS style sheet. Then we applied new styles to our text, with one font for each of the two speakers. The following steps explain how the process is done.
)
Figure 1 A In this example, we styled Alice and the White Queen’s dialogue differently by using Web fonts.
To use Web fonts:
- Go to Google’s Web fonts site, choose the fonts you want to use, and add them to a collection (we picked “Over the Rainbow” and “Redressed”). When you’re done, click the Use button to get to the code page B.
- On that page, you have three choices: Standard, @import, and JavaScript. We think the simplest is @import, so that’s what we’ll use here. Copy that line of CSS C.
- In Dreamweaver, use the Related Files bar to open your CSS file and paste in the @import rule you just copied D. Save the CSS file and switch back to your Web page; you’ll notice that the CSS Styles panel now contains two new rules: one @font-face for each of the two fonts we just added E.
- From the CSS Styles panel, select the .alice class. In the Properties pane, add the font-family property with a value of Over the Rainbow (or the equivalent for whatever font you chose) F.
- Now, select the .queen class, and add a font-family property with a value of Redressed G.
- At this point, you may be wondering why your Web page still looks the same—just switch into Live view, and you’ll see your new fonts appear H.
)
Figure 2 B Pick two fonts you like, and click Use.
)
Figure 3 C Copy the @import line of CSS to paste into your local CSS file.
)
Figure 4 D Our CSS file after we added @import.
)
Figure 5 E And suddenly, we’ve got two @font-face rules, bringing in our new fonts.
)
Figure 6 F To use these new fonts, just type their names into the CSS Styles panel.
)
Figure 7 G We’re nearly done when the queen has her new font.
)
Figure 8 H Switch to Live view, and see your fonts in action.
The not-so-helpful GUI
You may have noticed that Dreamweaver has a Modify > Web Fonts menu item that brings up the Web Fonts Manager and Add Web Font dialogs I. We tested it while writing this section, and we found it harder to use than the method we describe here. Similarly, in the Advanced Settings panel of the Site Setup dialog, you’ll find a Web Fonts category where you can set a Web fonts folder J. We don’t recommend that you use that, either—if you do, it makes Dreamweaver act in confusing ways and gives you less flexibility. And worse, once you add it, you can’t remove it.
)
Figure 9 I The Web Fonts Manager and Add Web Font dialogs. We don't think they're quite ready for prime time.
)
Figure 10 J Until Adobe says otherwise, this demo site will always have a Web Fonts folder.
Of course, these are issues that Adobe can choose to address at any time, so keep an eye out for updates.