Skip to main content
T
tonyh77652100
Participating Frequently
August 25, 2020
Answered

Edge web fonts and projects in DW

  • August 25, 2020
  • 4 replies
  • 889 views

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.

    This topic has been closed for replies.
    Correct answer Nancy OShea

    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.

     

    4 replies

    T
    tonyh77652100Author
    Participating Frequently
    August 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.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    August 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
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      August 25, 2020

      ADD ADOBE FONTS TO YOUR WEBSITE:

      1. Go to the your AdobeFonts console.
      2. Browse the library of available fonts and activate the ones you wish to use.
      3. Create a project and give it a name.
      4. Add fonts to that project.
      5. Copy & paste the embed code into the <head> of your HTML document.
      6. 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
        B
        Community Expert
        Ben MCommunity Expert
        Community Expert
        August 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

        T
        tonyh77652100Author
        Participating Frequently
        August 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?

         

        B
        Community Expert
        Ben MCommunity Expert
        Community Expert
        August 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.

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices