3 Replies Latest reply on Jan 28, 2016 12:03 AM by berzins

    How can i embed font in HTML document using AdobeEdgeAnimate?

    berzins Level 1

      Is it possible to use some specific font for animated text?

      I did convert the font using online ttf>woff conversion tool. Now i have a font file... How can i tell EdgeAnimate to use it for my text?

       

      I have read here about @font-face rule ... but i didn't find a way how to do it in EdgeAnimate.

      NB. In final result the font file must be included in a .zip file (it means there is a rule about "no external content allowed" - it must be published along all other files)

        • 1. Re: How can i embed font in HTML document using AdobeEdgeAnimate?
          marjantrajkovski Level 4

          1. Enter some text
          2. When text is selected, click + after default font to add a web font

          3. Click Custom
          4. In field Font Fallback List enter name of your font, example: MyFont

          5. In field Embed Code

          put link to external CSS for that your font, example, <link href='myfont.css' rel='stylesheet' type='text/css'>

          or put internal CSS for that your font, example, <style> @font-face { font-family: 'MyFont'; font-style: normal; font-weight: 400; src: local('MyFont'), local('MyFont-Regular'), url(myfont.woff) format('woff') </style>

          6. Copy your font in root folder or other folder defined in url(myfont.woff)

           

           

           

           

           

           

           

           

           

           

           

           

           

           


          • 2. Re: How can i embed font in HTML document using AdobeEdgeAnimate?
            marjantrajkovski Level 4

            It is the same like using Google Fonts, example Roboto

             

            Font Fallback List: Roboto

            Embed Code: <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>


            ...and when you open that embed code in browser you get:


            /* latin */

            @font-face {

              font-family: 'Roboto';

              font-style: normal;

              font-weight: 400;

              src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');

              unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;

            }

             

            ...and when you open that bolded in browser you get font.

            • 3. Re: How can i embed font in HTML document using AdobeEdgeAnimate?
              berzins Level 1

              Thank you ... But it didn't work for me

               

              I did step by step all what You told. Of course - on local a machine, where the font is installed everything works fine! If i publish it and place on the server i can open it on the same computer where the font is installed, but if i try another (without that font) or on my mobile device - there is only fallback font displayed.

               

              This is not a Google or Adobe web font. This is the font on my local machine, and it is no possible to find a similar, cause exactly this one is used as a company design strategic object, i cant change it.

              Until now i used to write all texts in one single .svg file and do all the cropping and positioning in EdgeAnimate ... but his is hardcore, if i need some 20 or more modifications in sizes and languages.

               

              ...

              When i'm starting to write the code in the field for custom font embedding, there is a litlle pop-up messsage (code will be injected into the <head> ...). I opened the published index.html file in Dreamviewer - its not there ...