4 Replies Latest reply on Dec 4, 2012 3:52 AM by sarhunt

    Web fonts from local files

    pushkin_wilder Level 1

      Hi folks,


      I've just purchased a family of 3 fonts to use in my EDGE animate project and I can't get them to work in EDGE which seems to be more geared to using a webfonts service provider.


      I am not massively code savvy so any responses would best be written as though addressing an enthusiastic, but not very bright dog.


      I have the webfonts locally to my edge project and they look like the attatched image.


      There is no css file which is what I think I need.


      I followed a mini tutorial explaining how to add locally stored webfonts, but that advised using a service on Font Squirrel to package the webfont ready for inclusion into EDGE animate, but when I tried to do that, the webfont I have bought wouldn't allow it for licencing reasons.


      If somebody could explain to me in a simple way what I need to do to get this working, I would be very happy.







      Screen Shot 2012-12-03 at 18.50.15.png

        • 1. Re: Web fonts from local files
          sarhunt Adobe Employee

          Hey Tom,


          If fontsquirrel is telling you they won't process your font, this may be a good indicator that you don't have the proper EULA to embed your fonts for web use. Just throwing it out there, you may have this taken care of


          You do need a .css file to link to your fonts. Your embed code would liik something like this:


          <link rel="stylesheet" type="text/css" href="mystyle.css">


          Inside your CSS file would look something like this:


          @font-face {

              font-family: 'MyFont';

              src: url('LinkToRegular-webfont.eot');

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

                   url('LinkToRegular-webfont.woff') format('woff'),

                   url('LinkToRegular-webfont.ttf') format('truetype'),

                   url('LinkToRegular-webfont.svg#MyFontRegular') format('svg');




          You can always make your own font using the method above, just be careful to abide by your EULA!



          • 2. Re: Web fonts from local files
            pushkin_wilder Level 1

            Hi Sarah,


            Thanks so much for getting back to me! That's really helpful. I do have the proper EULA on these as I've just purchased a licence for it this aftrenoon. I did also locate the .css file that came with the webfonts.


            As per your advice, I used this code:


            <link rel="stylesheet" type="text/css" href="JAS.css">


            The JAS.css file and the 'webfonts' folders are both in the main directory that my edge file is in and they all seem to be linking to the right folders etc, but it's still not working. It's just automatically defaulting to the standard serif typeface.


            I've attatched three grabs of my folder layout and hierarcy incase you can see something obvious that I've missed.


            Thanks again for your help!




            Screen Shot 2012-12-03 at 18.50.15.png

            Screen Shot 2012-12-03 at 22.44.54.png


            Screen Shot 2012-12-03 at 22.45.50.png

            • 3. Re: Web fonts from local files
              pushkin_wilder Level 1

              Hi Sarah,


              THANK YOU! When I rewrote the .css document as per your instructions it worked! There must have been something a bit funny about the format that the one I recieved with the fonts came in.


              I now have my proper typeface working, just in time to make my deadline - phew!


              Thanks so much for your help, that's one tiny part of this whole thing that I understand a bit more now


              All the best,



              • 4. Re: Web fonts from local files
                sarhunt Adobe Employee

                Good to hear you got it working!