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

Home > Articles > Web Design & Development > Adobe Dreamweaver

Using Web Fonts in Adobe Dreamweaver CS6

  • Print
  • + Share This
  • 💬 Discuss
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. Tom Negrino and Dori Smith show you some examples in this excerpt from Dreamweaver CS6 Visual Quick Start.

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.

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:

  1. 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.
  2. Figure 2 B Pick two fonts you like, and click Use.

  3. 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.
  4. Figure 3 C Copy the @import line of CSS to paste into your local CSS file.

  5. 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.
  6. 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.

  7. 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.
  8. Figure 6 F To use these new fonts, just type their names into the CSS Styles panel.

  9. Now, select the .queen class, and add a font-family property with a value of Redressed G.
  10. Figure 7 G We’re nearly done when the queen has her new font.

  11. 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.
  12. Figure 8 H Switch to Live view, and see your fonts in action.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus