Using Web Fonts in Adobe Dreamweaver CS6
Note: This excerpt is from the forthcoming book Dreamweaver CS6 Visual Quick Start, ISBN 9780321822529.
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.
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.
- 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.