6 Replies Latest reply on Jan 9, 2014 12:48 PM by DG Webs

    Adding your own fonts to Adobe Edge Animate?

    mike_rosser

      Hi there,

      I'm working on a website for a client and they want to use a specific font which I have run through a webfont generator. I have created a animated menu in Adobe Edge and I now need to know how I can include/import this into Adobe Edge Animate or if there's a way of targeting the menu with CSS.

      Any help would be great!

      Thanks

      Michael

        • 1. Re: Adding your own fonts to Adobe Edge Animate?
          mike_rosser Level 1

          I have found out how this can be done for anyone who has the same problem please see this article :-

          http://blogs.adobe.com/edge/2012/01/27/web-fonts-and-edge-together-at-last/

          Happy Creating.

          Michael

          1 person found this helpful
          • 2. Re: Adding your own fonts to Adobe Edge Animate?
            roti62

            Hey Michael,

             

            This should do it:

             

            First, you need to store the ttf otf font file absolute or relative to your project. Second, click on the textfield in your animated menu and make sure you are at frame 0. Then: Open the "Properties" tab. Click on the little "+" right in the "Text" section, which opens another dialog. There click on "Custom", fill in a name for your font and include a fallback font using "," as separator. In the field "Embed code" fill in the css definition leading to your font as you would do it in the head section of a common HTML file. Finally, click on "Add font" and your font in the menu changes. 

             

            This is similar to you would embed Google's web fonts. Embeding Edge webfonts provided by Adobe is easier by clicking "Edge Webfonts" instead of "Custom".

             

            From now, you should now find your font name in the list. Click on it, and your font should change even in other elements. Of course only in the project for which you embeded the font. You need to do in other projects again.

             

            Hope it helps...

             

            fonts_edge.jpg

            • 3. Re: Adding your own fonts to Adobe Edge Animate?
              mike_rosser Level 1

              Yes it does thanks alot Roti62.

              All the best

              Michael

              • 4. Re: Adding your own fonts to Adobe Edge Animate?
                roti62 Level 1

                Mike, I am glad you figured it out yourself in the moment I hit the submit button. I had no glue about the Adobe tutorial, but it describes an exakt similar way. So enjoy...

                • 5. Re: Adding your own fonts to Adobe Edge Animate?
                  mike_rosser Level 1

                  It sure does. It's all good though. I have been pulling my hair out trying to work it out. Great that everyone helps each other out. Makes for great designs.

                  Thanks again Roti62.

                  • 6. Re: Adding your own fonts to Adobe Edge Animate?
                    DG Webs Level 1

                    Hi Guys,

                     

                    I have followed this exact procedure with a font called Marketing Script but I just cannot get it to work. It was a ttf font that I had converted via Font Squirrel. I have all the fonts and the stylesheet in the same directory as the Animate files. Here is how I filled out the Custom font dialog box:

                    Screen Shot 2014-01-09 at 2.42.37 PM.png

                     

                    I also tried entering the font name as shown below because that is how it's shown in the css file.

                    Screen Shot 2014-01-09 at 2.45.12 PM.png

                     

                    My css file is as follows:

                    /* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 9, 2014 */

                     

                     

                     

                    @font-face {

                        font-family: 'marketing_script_inlineRg';

                        src: url('marketingscript-inline-webfont.eot');

                        src: url('marketingscript-inline-webfont.eot?#iefix') format('embedded-opentype'),

                             url('marketingscript-inline-webfont.woff') format('woff'),

                             url('marketingscript-inline-webfont.ttf') format('truetype'),

                             url('marketingscript-inline-webfont.svg#marketing_script_inlineRg') format('svg');

                        font-weight: normal;

                        font-style: normal;

                     

                     

                    }

                     

                    I have tried this over and over again with no success. The text appears like this:

                    Screen Shot 2014-01-09 at 12.43.17 PM.png

                     

                    And is should look like this:

                    Screen Shot 2014-01-09 at 12.44.43 PM.png

                    Any ideas what is wrong? I'm at my wit's end.