Edge web fonts and projects in DW

Report · Aug 25, 2020

Old brain straining here, so please read with patience.

If I go to the Adobe font library site and choose a font, or several in a project, I see that there are various ways (which I don't yet fully understand) to embed them in the files of the site I'm constructing in Dreamweaver.

When I do embed one of these fonts or projects using one of the embedding options, will that font or family show up as selectable in Dreamweaver's font manager, like the rest of the Adobe Edge Web Fonts displayed there?

Will it, or they, show up on the font list in the CSS properties panel?

Or are they only accessible and manipulable from within the HTML and/or CSS code files?

A small part of my confusion results from there being, on the Adobe Font website, a list of Adobe applications for which these web fonts are meant to be used, and that list doesn't include Dreamweaver.

This, on my part, being a race against the increasing loss of brain cells, would it be simpler for me to include a downloaded web-font in the Fonts directory within my site root folder?

I see that this way, the font would be included in the Local Web Fonts section of DW's font manager.

But used this way, would it always be available and visible to someone viewing the site over the internet?

I hope I've managed to explain my confusion clearly and that someone will be kind enough to advise me.

Report · Aug 25, 2020

Basically what happens with Adobe fonts is that the CSS is included on your site to load the fonts and it pulls the font from Adobe's server. Google also has a font service that works in this way. The reason you see the list of applications is because the fonts in Adobe Fonts are not just meant for the web, some are allowed to be used in publishing. However, publishing has different rights and restrictions than web fonts and in some cases you may not be able to use the font for web or print depending on the license agreement with Adobe.

To answer your question about them showing up in the font list, they will not show up automatically. If you click the drop down for the fonts, you can then manage fonts. Click on Custom Font Stacks and here you can build a custom list option with your new fonts. This tutorial goes through this in detail: https://helpx.adobe.com/dreamweaver/using/modify-font-combinations.html

Report · Aug 25, 2020

Thanks very much for that, I've pretty well got the gist with your help.

I'll need to learn a bit about font stacks now but after making a one font stack, I then found that font in the font list in the CSS Properties panel and was able to use it.

This would remove the need for me to download a font and put it in the fonts folder in my site root folder.

About font stacks, would a font stack contain a range of fonts that could be used separately and individually in a various parts of a web page, or is a font stack a primary font, followed by a list of alternative fonts as a fall back option if the previous font in the stack is, for some reason, unavailable?

Report · Aug 25, 2020

The way to think of the font stacks is that they would be used to present backup fonts where a font may not be supported. This is not as big a deal today as it was in the past, but it's always good to control the fallback fonts that your site relies on. Typically in your CSS, it is common to have a font stack that is for your heading fonts (h1-h6) and one for your body fonts (body). But this varies from brand to brand.

Report · Aug 25, 2020

ADD ADOBE FONTS TO YOUR WEBSITE:

Go to the your AdobeFonts console.
Browse the library of available fonts and activate the ones you wish to use.
Create a project and give it a name.
Add fonts to that project.
Copy & paste the embed code into the <head> of your HTML document.
Add CSS along with a fallback, web-safe font-family to your styelsheet.

Adobe hosts web fonts on their own servers (not yours) so there is nothing for you to download.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 25, 2020

To follow-up on my earlier reply, Edge Fonts and Typekit are all under the AdobeFonts umbrella now.

EDIT UPDATED 2/26/2022

Effective July 2022, Adobe Edge Fonts will be discontinued. Please switch to Adobe Fonts or other replacement.

When you activate AdobeFonts and save to your Creative Cloud Library, fonts become available for you to use in your favorite desktop apps like Photoshop, InDesign and Illustrator... Your license covers both personal and commercial use.

On the web however, you must use the embeded code. Or if your CMS doesn't support embedded code, it should allow you to add AdobeFonts by the project ID which accomplishes the same thing.

For specific questions about AdobeFonts, see links below.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 26, 2020

Thanks, you've both been a great help. What you've explained is very clear and when I've worked my way through the steps I should be good to go.

Edge web fonts and projects in DW

4 Correct answers