With Adobe Dreamweaver 12.2 CCM release, the choice of fonts has become wider and better! Integration of Edge Web Fonts with Dreamweaver gives you access to a vast web font library made possible by contributions from Adobe, Google, and foundries around the world, for free. What’s more? Designer or the end user need not necessarily have these fonts installed on their systems — the web browsers render the text with the fonts at run-time.
Here are the quick steps to use Edge Web Fonts:
- Select the required Edge Web Font using the Manage Fonts dialog box in Dreamweaver. Once you select the fonts, they will be available for use in all the font lists in Dreamweaver across projects/sites.
- Apply the web font to the required elements in your web page.
- Preview the web page with the font and make changes as necessary.
Continue reading for detailed instructions on these steps or watch this short video:
Selecting Edge Web Fonts
Select Modify > Manage Web Fonts, and in the Adobe Edge Web Fonts tab. Click the fonts you want to use.
The Manage Fonts dialog box shows a preview of all the available Edge Web Fonts. You can narrow down your search by filtering:
A. By the name of the font. For example, you can type “dam” to search for fonts that have “dam” as part of their name.
B. By the recommended fonts for paragraphs or headings.
C. By the type of font. For example, you can search for all “serif” fonts by clicking .
D. By the list of fonts that are previously imported into Dreamweaver.
Further, you can combine two or more of the above search criteria to get more specific/accurate results.
When you click Done, the chosen fonts will be available for you to use through the font lists in Dreamweaver.
Using Edge Web Fonts in your web page
You can apply the Edge Web Fonts just like any other font in Dreamweaver. The following screenshot shows the font ‘abel’ used in a web page:
For ‘abel regular’, the script tag will be:
In the “src” attribute, the “http://webfonts.creativecloud.com” and “default.js” remain the same for any Edge web font you use.
- “abel” — internal name (slug-name) of the font used by the backend to uniquely identify the font.
- “n4” — indicates that the variant required to be downloaded is “normal” style and of weight “400“. Similarly, “italic” style with a weight of “700” would have the pattern “i7”
Fonts that are subsequently used get appended to this same tag delimited by a semi-colon. For example, if you use both “abel” and “actor” fonts:
Tip: In case you find that the script tag is not inserted into the code or is not working as expected, select Commands > Clean Up Web Fonts Script Tag (Current Page). Dreamweaver automatically updates the script tag.
The Property Inspector (PI) adapts to the behavior of Edge Web Fonts. The “Bold” and “Italic” buttons in the PI are replaced with dropdown combo boxes for “Style” and “Weight” of the font respectively. When a web safe font (already installed on the system) such as “Verdana” or “Arial” is selected, the drop-down lists provide all possible variants for the fonts. When the selected font is an Edge web font, the drop-down lists provide only the variants supported by the Edge web font.
Preview your web page
Edge Web Fonts are not rendered in Design view. Switch to Live view to see how the text is rendered with the web font.