How to use Adobe Edge Web Fonts correctly

I am a Dreamweaver newbie and am trying to learn how to use it through the tutorials. I am stuck at part 3 trying to use Adobe Edge Web Fonts correctly in my web site. As far as I can tell I have followed the instructions in the tutorial correctly, but the font style effect does not show up on my site. I am working on a Windows 7 machine and using Dreamweaver 5.5. I have copied and pasted the javascript into the correct spot in the head of the index.html page as well as included the font-family name in the CSS file and saved the whole smash. The source code for my index page looks exactly like the sample in the tutorial, and I have tried to view my site in my browser, but no dice. Doesn't display the Edge Web Font style in the web page. I believe I've done everything according to the directions, but I suppose I've missed some small detail. Any suggestions greatly appreciated

You need to add a <script> to the head of your documents like the example below.  In my example, I'm using all of the aguafina-script and league-gothic fonts.
<!--Edge Font-->
<script src="//use.edgefonts.net/aguafina-script:n4:all;league-gothic:n4:all.js"></script>
CSS:
     h1 {
     font-family: league-gothic, sans-serif;
     font-weight:bold;
     color: #639;
     font-size: 250%;
A simple way to get the correct codes is to go to Adobe Edge Web Fonts and select the font you wish to use.
https://edgewebfonts.adobe.com/fonts
NOTE: You won't see the custom web fonts displayed in Design View, Live View or when previewed locally unless you use a local testing server.  An easier way to test is by uploading the page to your remote server.
Hope this helps,
Nancy O.

Similar Messages

  • How do I use a variation of the font family OPEN SANS in Adobe Edge Web Font?

    How do I use a variation of the font family OPEN SANS in Adobe Edge Web Font?
    ex:
    <scriptsrc="//use.edgefonts.net/open-sans-condensed:n3,i3,n7:all;open-sans:n3,i3,n4,i4,n6, i6,n7,i7,n8,i8:all.js">
    How do I use the i3 variation in css?
    My css looks like this: font: 16px 'open-sans-condensed';

    Thank you.
    But I want to use the [i3] variation font.
    <scriptsrc="//use.edgefonts.net/open-sans-condensed:n3,i3,n7:all;open-sans:n3,i3,n4,i4,n6, i6,n7,i7,n8,i8:all.js">
    Would look like?
    CSS Selector {
    font-family: open-sans-condensed:i3, sans-serif;
    font-size: 16px;

  • Adobe Muse, using an adobe edge web font but having a problem with Google Chrome

    I have created a website with Adobe Muse and I am using an adobe edge web font that looks great on all browsers except for google Chrome... On chrome the font looks fuzzy and broken-up. Is there a way to fix this??? Thanks.

    This is the error:
    Add-ons: {d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d}:1.3.3,{097d3191-e6fa-4728-9826-b533d755359d}:0.7.12,[email protected]:1.2,{d40f5e7b-d2cf-4856-b441-cc613eeffbe3}:1.48.3,{CE6E6E3B-84DD-4cac-9F63-8D2AE4F30A4B}:3.2,{3112ca9c-de6d-4884-a869-9855de68056c}:7.1.20101113Mb1,[email protected]:1.72.0,[email protected]:1.2,{36450ee9-67e2-46a0-8a90-eabde5d74e28}:1.300.306,[email protected]:2.2.0,[email protected]:3.60,{29c4afe1-db19-4298-8785-fcc94d1d6c1d}:0.6.2009110501,[email protected]:1.6,[email protected]:1.1.3,vshare@toolbar:1.0.0,{972ce4c6-7e08-4474-a285-3208198ce6fd}:3.6.13
    BuildID: 20101203074432
    CrashTime: 1298598340
    EMCheckCompatibility: true
    Email:
    FramePoisonBase: 00000000f0dea000
    FramePoisonSize: 4096
    InstallTime: 1291988448
    ProductName: Firefox
    ReleaseChannel: release
    SecondsSinceLastCrash: 6558
    StartupTime: 1298598134
    Theme: classic/1.0
    Throttleable: 1
    URL: https://mail.google.com/mail/?shva=1#inbox
    Vendor: Mozilla
    Version: 3.6.13
    This report also contains technical information about the state of the application when it crashed.

  • How do I include 'Edge Web Fonts' into Edge Animate?

    How do I include 'Edge Web Fonts' (not Google Web Fonts) into Edge Animate?

    Have you tried to use google fonts? I have used them and they work for me.
    When you add your font for example:
    Copy paste:
    <link href='http://fonts.googleapis.com/css?family=Finger+Paint' rel='stylesheet' type='text/css'>
    and then for font family.
    'Finger Paint', cursive;
    then select addfont on the addfont screen

  • On Google Chrome the Adobe edge web font looks fuzzy and broken-up. Is there a way to fix this?

    I have created a website with Adobe Muse and I am using an adobe edge web font that looks great on all browsers except for google Chrome... On chrome the font looks fuzzy and broken-up. Is there a way to fix this??? Thanks.

    Thank you Sanjit,
    I have redone the site using using the font TREBUCHET. The font that I was using that was giving me the problem was EXO which is an Adobe Edge Web font. I'd rather use EXO... Here is a screen shot of a sample page, areas where the type looks especially messed up are circled in red.
    This only happens when opened in Google Chrome on a Windows PC. However it looks fine with Chrome on my MAC.
    Regards,
    Jan

  • Adobe Edge Web Font Comparison?

    Newbie here to web design (html, css, js), DW CC, and Edge Fonts.  Is there a "font finder" for Adobe Edge Web Fonts?  I found the regular font finder, but nothing for Edge fonts.
    I'd like to do a side-by-side comprison of several edge web fonts for a header instead of trial and error into a website-name field for example.  If there isn't an edge font finder please recommend a easy way to accomplish this  - in simple terms please.  It's late and I'm sure it's staring me right in the face, but for the life of me I don't see it.
    Thanks!

    YOu can try this - http://edgefonts.toekneestuck.com/
    You need to get a list of all fonts that you would like to preview and then key them in the filter at the top of the page

  • How do you invoke Edge Web Fonts?

    Assuming this is available in this release, how to you bring up the Edge Web Fonts capability?

    Hi Phil,
    You should be able to trigger the code hints manually anywhere in the font-family value by pressing Ctrl+Space.  It should also pop up automatically if you type "," followed by a space anywhere in the value.  Are those approaches not working for your code?  (If so, please post a snippet of your CSS here so we can investigate).
    - Peter

  • HOW do I find out how much using additional Typekit web fonts COSTS?

    It seems very strange to me, but there are NO PRICES listed at typekit.com.
    You can see lots of faces, but there seems to be no way to USE those faces on the web! I excpected there to be SOME information on pricing, but there is NONE.
    One might conclude that they don't want any business ...

    Hi Michael,
    I have just replied to your support email, but will post the same information here for the forum archive:
    I'm sorry for any confusion here.  Your Typekit Portfolio plan is included in your Creative Cloud subscription at no additional cost. 
    This is why you don't see information about pricing when you are signed in to your account: it's part of the Creative Cloud subscription that you already have.  I will let the team know that this was confusing, though, so we can make it more clear in the future.
    # About your Portfolio plan:
    A Portfolio plan gives you access to the full library of Typekit web fonts, as well as the new desktop sync feature. 
    You can read more about the Portfolio plan details–and the pricing on the other Typekit subscription options–on the plan pages:
    https://typekit.com/plans
    Font sync is still being rolled out to users, so will need to request access in order to try it out. Read more about that on our blog: http://blog.typekit.com/2013/08/08/sign-up-for-early-access-to-desktop-font-sync
    or just head over to sign up:
    https://creative.adobe.com/earlyaccess.
    Again, all of this is included as part of your Creative Cloud subscription.  You will not be billed anything additional by Typekit (unless you choose to upgrade your subscription to support more pageviews.)
    I hope that this helps; let me know if you have any other questions.  best,
    -- liz

  • How do you add/use typekit fonts that are not edge web fonts?

    I am just trying out the new Muse CC 2014.1 (August) release and was keen to try the new font facilities.  As far as I can see that while I can now add other fonts for which I have downloaded web font files via the Self Hosted Web Fonts function, Typekit fonts that are not "Adobe Edge Web Fonts" are effectively unavailable?  Have I missed something.
    As an example I want to use the Proxima Nova web font family.  I have selected it on the type kit site, set them up to Sync via my Creative Cloud account.  So for example if I select a font in Photoshop CC or Illustrator, the Proxima Nova fonts appear. Even ok in Word for Mac.  They do not appear in Muse.
    To add them as self hosted web fonts, I would need to physically download the relevant fonts files and install them on my desktop using the OS-X font tool.  However as they are being sync'd via Creative Cloud this shouldn't be necessary should it?  Also I don't see an option for doing so on the typekit site.
    Any help or guidance would be very welcome.
    PS:  I seem to have a separate issue with the Creative Cloud app, which is not listing fonts under the Assets tab.  But I don't think that is related as they are working fine for Photoshop, etc.

    Hi David,
    I'm sorry that you ran into trouble with this. To add fonts from Typekit to your Muse website, you will want to use the web fonts path instead of desktop fonts.  (You can use a desktop font synced from Typekit in your Muse design, but it will exported as an image the same as any other system font.)
    There are a couple options for using Typekit web fonts in Muse:
    o) The Muse Insider wrote a post on how to insert the Typekit embed code from the Muse interface:
    http://museinsider.com/how-to-add-typekit-fonts-to-your-muse-site.html
    o) Or you can add the embed code to the Page Properties dialog within Muse, which will include it in the <head> of the page when you export your website. The steps are the same as this tutorial, but you will add the Typekit embed code to Muse instead of into your page directly:
    TYPEKIT | Adding fonts to your site
    Note that in either case the Typekit fonts will not be displayed in the Muse preview window. You'll need to publish your site to a server in order for the Typekit fonts to be loaded into the page.
    If those look like more coding that you are comfortable with, you might try one of the fonts which you can select from the font menu instead. Here are some that are similar to :
    https://edgewebfonts.adobe.com/fonts#/?xHeight=high&contrast=low&class=sans-serif&width=re gular
    We are also working on a more complete integration of Typekit with Muse in the future, but I can't say yet when that will be available.
    >> PS:  I seem to have a separate issue with the Creative Cloud app, which is not listing fonts under the Assets tab.  But I don't think that is related as they are working fine for Photoshop, etc.
    Do you see a "loading" icon in the tab (e.g. a blue spinner wheel)?  It sounds similar to this thread; you might try these suggestions:
    Re: Adobe Creative Cloud / Desktop App / Home Screen: Constant Spinning Wheel
    I hope that this helps; let me know if you have any other questions.  Best,
    -- liz

  • Edge Web Fonts not loading properly

    I've been having trouble with the Adobe Edge Web Fonts loading within the past few days. Using four different ones, sometimes a couple but not all load at this point, and sometimes none. So not sure what the issue could be because it looks to be happening on different files and on different computers as well. Any suggestions?

    Okay, so it seems like i can reproduce it on new files. The problem occurs from selecting certain fonts. Bangers is one i was using and seems to have issues after selecting. In the add font box, after selecting it, other fonts no longer become available and fall back to the default ones. So trying this on two different computers with a new file can mean it is either a web font issue, or some odd occurence my internet connection is causing. Any help is appreciated.

  • Edge Web fonts missing in Dreamweaver

    I have a Mac Pro OS 10.10.1 and the latest Dreamweaver CC update. When I click Manage Fonts, Adobe Edge Web Fonts do not appear. There is just a search field at the top under the words, "Edge Web Fonts give you access..."  A list of items to the left invite me to search for the best fonts for headings, paragraphs, etc. According to the tutorial, the whole box should be filled with fonts. Any ideas?

    Hello,
    in my German DW this "Manage Fonts" appears in the moment, when I start a css command (see my screenshots)
    and
    where I now can select my needed font.
    To add the font list Adobe has prepared this link: Dreamweaver Help | Add Edge Web Fonts to the Font list
    Hans-Günter

  • How do I use Edge Web Fonts with Muse?

    How do I use Edge Web Fonts with Muse - is it an update to load, a stand alone, how does it interface with Muse? I've updated to CC but have no info on this.

    Hello,
    Is there a reason why you want to use Edge Web Fonts with Adobe Muse?
    Assuming you wish to improve typography of your web pages, you should know that Muse is fully integrated with Typekit. This allows you to access and apply over 500 web fonts from within Muse. Here's how you do it:
    Select a text component within Muse, and click the Text drop-down.
    Select Add Web Fonts option, to pop-open the Add Web Fonts dialog.
    Browse and apply fonts per your design needs.
    Muse also allows you to create paragraph styles that you can save and apply to chunks of text, a la InDesign. Watch this video for more information: http://tv.adobe.com/watch/muse-feature-tour/using-typekit-with-adobe-muse/
    Also take a look at these help files to see if they help you:
    http://helpx.adobe.com/muse/tutorials/typography-muse-part-1.html
    http://helpx.adobe.com/muse/tutorials/typography-muse-part-2.html
    http://helpx.adobe.com/muse/tutorials/typography-muse-part-3.html
    Hope this helps!
    Regards,
    Suhas Yogin

  • How do you use edge web font in Edge Reflow?

    By default, I don't have a lot of fonts. It's just viewing a few of them.
    How can you get the web font for Edge Reflow? Can you use font from fontbook?
    Is there a way to download Edge Web Font?

    Above: using Brandon Grotesque (web use font) does not display the correct font.
    I'm using Typekit and have an internet connection. If I switch to a "desktop use" font, it shows up, so I'm guessing the "web use" only fonts won't show in Reflow. A little frustrating when you're trying to get an accurate preview/determine best font styling because of the back-and-forth workflow.
    Above: using Source Sans Pro (desktop use font) does display the correct font.

  • Can Edge Web Fonts be used for Photoshop website mockups?

    I'm keen to know if Edge Web Fonts can be used within Photoshop as an extension (to make the website mockup process smoother). I know Edge Web Fonts plays well with Muse and other Edge Tools, but I don't want to use Muse to build my sites - I just want to do my mockups in Photoshop. Can Edge Web Fonts work from within Photoshop, or will I be forced to switch to something like Extensis Suitcase Fusion for font management within Photoshop? Thanks in advance for your help!

    Problem solved - I've found everything I was looking for (and more) in Edge Reflow.

  • How do I use Adobe Edge to get faded header images on my website?

    Trying to use Adobe Edge to get faded header images on my website. Was referred to Adobe Edge because it is supposed to be easy for beginners. I was able to upload my images, but then there was no instruction/direction on what to do next. Everything I clicked just brought me somewhere else. I'm a novice who needs help with coding, as everytime I tried adding coding to my page, it messed it up. I would appreciate if someone can tell me what to do after I upload the images.

    Yes, Animate. Again, I uploaded the images, but then, I didn't see any directions on what to do next, as I would like fading header images for my website. I understand that it is supposed to generate the code for my website, which is where I need the most help.

Maybe you are looking for