On October 2011, Adobe acquired Typekit Inc., giving web designers a vast array of fonts to use within their website creations. However, those who actually code websites may not share the same enthusiasm for this new acquisition. Coders understand that only specific font sets are web compliant. Old-timers will question if offering a large array of fonts to designers is not unlike opening Pandora's Box.
Determined to further please both web-coders and web-designers, Adobe added the new Web Fonts Manager [Modify/Web Fonts] within Dreamweaver CS6. This new feature allows web designers to utilize an infinite number of fonts within their website design. Wisely, Adobe did not limit the Web Fonts Manager to Typekit fonts; but instead allows users to add numerous fonts from a variety of sources, as long as the aquired fonts are properly licensed for Internet use.
From a designer's point of view, this is a big step forward in the creation of visually stunning, and unique websites. However, as with all website design, there are "rules" that must be followed before the fonts can be viewed universally on all browsers and devices. Even when the rules have been precisely applied, the probability that the selected non-web-safe font will be viewable on all browsers is very low.
Even with the new Web Fonts Manager, some fonts will not be
viewable in all browsers
The Dreamweaver CS6 Web Fonts Manager is accessible from the Web Fonts link [Application Bar, under Modify/Web Fonts]. From the Web Fonts Manager box you can add, edit or delete a new font. Within the Add Web Font box, you can rename the font, and upload one of the four font formats.
Before you can fully utilize the fonts in the Web Fonts Manager, you must first agree that the "font is properly licensed" for website usage. Finding a properly licensed font is not always an easy task. In a perfect world, all fonts would come with an End User License Agreement (EULA) "read me" file. Yet, I know from experience that the majority of fonts I have collected over the years do not contain 'read me files,' let alone EULA information.
One way to make sure your newly acquired font is properly licensed for web usage is to contact the font creator directly. However, that can be both time-consuming, and more often than not, it will lead to a dead-end path. The second best way is to obtain your fonts from a reputable site that has already done the font licensing homework for you.
Word of caution, even when you download a font from a site that guarantees their fonts are licensed for "commercial use," be cognizant that not all font licenses are the same. Most are over-complicated and heavily laden with legalese, while other sites have font licenses that simply state that their fonts are Royalty Free for Commercial Use.
Finding a properly licensed font is only the first step in pre-acquiring a font that will work within the Dreamweaver CS6 Web Fonts Manager, and, more importantly, that will display the non-web font properly on the Internet.
Since websites are now viewable across a multitude of devices and platforms, this means that web designers must also make sure that fonts used, within a website, are also available in several font formats. The Dreamweaver CS6 Web Fonts Manager supports the following four major font formats:
- TTF [TrueType Font]: Supported by most browsers, not supported by IE and iPhone
- EOT [Embedded OpenType]: Supported by Internet Explorer only
- WOFF [Web Open Font Format]: Emerging web standard: compressed font file format
- SVG [Scalable Vector Graphics]: Format supported by Safari Mobile [iPhone/iPad]
Important note: the Dreamweaver CS6 Web Fonts Manager does not convert font files … it only uploads the font files that are within your font folders. For example, if you want to use a font that is only available in a TTF format, you can still use it within your web design. Just be cognizant that the TTF font is not supported by Internet Explorer, or on devices that only use Safari Mobile [iPads and iPhones], and when viewed on those browsers the font will automatically convert to a font that is supported by those browsers. As a good design practice, seek out and use a font that contains all of the four major font formats.
If you didn't create a fonts folder when you initiated your website, the first time you use the Web Fonts Manager the Site Setup/Advanced/Web Fonts window will open. Once you have designated your site's Web Fonts folder, all of the Web Fonts Manager fonts will automatically upload to that folder, along with their newly created CSS stylesheets.
Even if the newly acquired font is available in all four font formats (TTF, EOT, WOFF, and SVG), there is still no guarantee that it will appear in all versions of browsers and/or on all platforms. So, although designers will be (and should be) excited about this new Dreamweaver CS6 feature, they should know the restrictions, and be aware that (at the time of this review) a website designed with non-web-compliant fonts will not be universally viewed as designed.
The Web Fonts Manager is a powerful tool and I've merely touched on the basic steps for using this exciting new feature within Dreamweaver CS6. To delve even further into the feature's functions, I suggest that you watch Adobe's in depth tutorial on their Adobe TV website.
Back to the Adobe Dreamweaver CS6 Review...
Get to know industry
leaders and professionalsas they sit down and talk candidly with
Contributing Columnist, Dee-Marie,
Author of "Sons of Avalon: Merlin's Prophecy"
Visit Dee-Marie on Twitter: Dee_Marie_SOA
October 1, 2012
Please note: If you find the color of the text hard to read, please click on "Printer-friendly" and black text will appear on a white background.
|
|
||||||
|
||||||
|
|
Comments