Edge Web Fonts integration with Adobe Dreamweaver

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:

  1. 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.
  2. Apply the web font to the required elements in your web page.
  3. 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.

 

Manage Fonts

Manage Fonts dialog box

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 seriffontfilter.

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.

Filtering Edge fonts

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:

Script tag

When you apply the font, a JavaScript tag is automatically inserted. This script identifies the user agent and fetches the font from the Creative Cloud server onto the browser’s cache. Then, the browser downloads the actual font onto the user’s system when the page is being rendered.

For ‘abel regular’, the script tag will be:

<script src=http://webfonts.creativecloud.com/abel:n4:default.js type=“text/javascript”></script>

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:

<script src=http://webfonts.creativecloud.com/abel:n4:default;actor:n4:default.jstype=“text/javascript”></script>

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.

Property inspector

Property Inspector 2

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.

  • Rembrandt diaz says:

    This doesnt work. Why is the script code not being inserted on code.

    • Janaki Lakshmikanthan says:

      Hi Rembrandt,
      Please use the menu item “Commands > Clean Up Edge Web Fonts Script Tag (Current Page)” to fix your script tag.
      Dreamweaver manages to update the script tag for Edge Font if it is inserted through CSS Panel and PI.

      Regards,
      Janaki

  • First, let me say this is great.

    Secondly, I have a creative cloud account, which gives me access to Typekit’s fonts. I’m wondering if there is any plan to integrate all of the Typekit fonts, in a way that is similar to what you are doing here? That would make this new feature and Typekit even more awesome.

  • Christopher Pallé says:

    This looks really great. Is it available on the Mac?

  • Christopher Pallé says:

    I don’t see where I can do this in DW or Edge on the Mac. I updated to the latest version last night.

    In Modify > Web Fonts… there is no option for the Edge Web Fonts.

  • Christopher Pallé says:

    Nevermind. There was an update that came up that morning. All is well. :-)

  • Definitely would like to second using TypeKit. Not sure I understand the rational of a “CreativeCloud only” upgrade that doesn’t give you access to the CC version of the service.

  • And still there’s no Myriad Pro! When there finally is such a good tool in Dreamweaver, the one font I need isn’t in the list. What’s the deal with Dreamweaver and Myriad Pro? Does anyone know how to get Myriad to work in Dreamweaver?

  • Hi,
    I love the Web Font feature but wonder if I cancel my creative cloud subscription will the previous sites I published lose their web fonts. This would be a disaster for my clients and my business.
    Thanks for your advice in advance.

    christos

    • Hi Christos,
      No, your subscription status will not affect the rendering of fonts that you have already included in your projects.

      Smitha

  • Sounds great, thanks!

Share your thoughts

Your email address will not be published. Required fields are marked *

*


5 − two =