6 Replies Latest reply on May 18, 2013 9:32 AM by kevincsftendo

    How to specify fonts in text in SVG file?

    kevincsftendo

      I've got an Edge Animate composition that includes a bunch of SVG files which specify (inside the svg files themselves) that a particular font should be used. So for instance, there's text in the SVG that's set to render in Arial. If I view that SVG by itself in the browser, the text is rendered in Arial. But when that SVG is part of an Edge composition, the text in that SVG reverts to some other default font.

       

      The same problem happens when I try to specify a custom web font inside the SVG. The web font shows up fine when viewing the SVG independently, but when it's part of an Edge composition, it reverts to a default (Some serif font: Times, I think.)

       

      Let me stress this is NOT about specifying the fonts in Edge itself (by adding the web font to the edge composition, and then styling text from within the Edge Animate interface): this is about text that has been specified in the SVG file in Illustrator. That font specification is ignored when the SVG is brought into Edge.

       

      This text in the SVG shows as Arial when I'm in the Edge Animate interface, but when I view the whole composition in the browser, that's when it reverts to a different font.

       

      Any ideas what's going on here?

        • 1. Re: How to specify fonts in text in SVG file?
          sarhunt Adobe Employee

          Hey Kevin,

           

          Which browser are you seeing this on? Also when it comes to SVGs it's better practice to outline the fonts before exporting as not all browsers will render the font properly.


          Sarah

          • 2. Re: How to specify fonts in text in SVG file?
            kevincsftendo Level 1

            Thanks for the reply. Yes, I've given up on fonts embedded in SVGs for now. I tried using SVGs with all text converted to outlines. That solved the type problem. But it of course made all the SVGs very large. I'm now having a problem with the Edge composition not fully loading.

             

            It throws some javascript errors that indicate that al the libraries haven't loaded. Or, sometimes it just pulls up a blank page and nothing ever shows up, even when there are no javascript errors. The errors are mostly this:

             

            1. Uncaught ReferenceError: jQuery is not defined byod_edgeActions.js:191
              1. (anonymous function)byod_edgeActions.js:191

             

            1. Uncaught TypeError: Object #<Object> has no method 'okToLaunchComposition' byod_edgePreload.js:27

             

            edgeCallbackbyod_edgePreload.js:27

             

              1. (anonymous function)byod_edgePreload.js:15
              2. tbyod_edgePreload.js:11
              3. dbyod_edgePreload.js:10
              4. I.b.onreadystatechange.b.onloadbyod_edgePreload.js:10

             

             

            So I'm thinking the loader is trying to move on to execute code when it hasn't loaded what it needs. This was happening on Firefox and Chrome. So now I've converted some of the larger SVGs to PNGs, which brought their file size down considerably. This eliminated the error on Firefox, but I'm still getting it in Chrome. I think it's just taking too long to load all my animations. It's a pretty big composition: an infographic that's 548 px wide by 3100 px tall. It has 8 animations in it, each as a symbol. There are perhaps 80 individual graphic elements in total that are involved in the animations.

             

            Even when those graphic files are as small as I can make them, Chrome still errors out before displaying anything.

             

            If it just turns out that this is too big a composition to be done in Edge Animate, I'm in big trouble, as a client has already paid for this.

             

            I'm hoping I can find a way to slow down the loader and make it wait until everything is loaded before moving on. But it's tough, as the edgePreload.js file wasn't meant to be tampered with, and is minified. I don't mind having a preload image appear for a while with a "loading..." message. But if it never loads...

             

            Not sure how to proceed, really.

            • 3. Re: How to specify fonts in text in SVG file?
              sarhunt Adobe Employee

              If you can upload a .zip of your composition we can take a look to see where the problem might lie.

               

              Sarah

              • 4. Re: How to specify fonts in text in SVG file?
                kevincsftendo Level 1

                Thanks! You can find the zip here:

                 

                http://exp.tendoprojects.com/edge_testing/net_mobility4.zip

                 

                I have not finished converting all the SVGs to PNGs, but I converted the largest ones. I will continue to do that to bring down file sizes, but it's a shame, because rendering the small text as bitmapped images is making the text less sharp. But that's the least of my worries right now.

                 

                It fails in Chrome and Safari right now. Haven't even tried IE9 (that's a whole kettle of fish I'm not prepared for yet). On both Chrome and Safari, if you reload the page, it will load the second time. But shift-reload (clearing the browser cache) will make it time out again. So clearly if it gets a chance to cache at least some of the files first, the load time the second time is reduced, and therefore it works.

                 

                It doesn't seem like changing anything about the individual animation behaviors themselves (other than reducing the number of overall graphic items) would do much good, because it's not even getting to the point of executing anything. It just has to load faster, or the preload script needs to be more patient or something.

                 

                Any advice you can give would be greatly appreciated.

                 

                Oh, BTW: right now all the animations are just running simultaneously. The eventual hope was to trigger them sequentially as you scroll down the page. I've got code that does that, but for simplicity's sake I've excuded it from this composition for now. Just trying to eliminate as many variables as I can to solve this problem.

                • 5. Re: How to specify fonts in text in SVG file?
                  kevincsftendo Level 1

                  So I looked in the "Network" tab of the Chrome devloper tools while this was loading in Chrome. It's clear that jquery-1.7.1.min.js is taking more than six seconds to load. Meanwhile, edge.1.5.0.min.js and <mycomposition>_edgeActions.js are fetched simultaneously along with jquery. But these two load in much less than six seconds. They execute, and then throw up "Uncaught ReferenceError: jQuery is not defined" errors. Which makes sense, because jQuery takes so long to load.

                   

                  Is there any way to make the <mycomposition>_edgePreload.js script load things more sequentially, as opposed to simultaneously fetching everything and throwing the dice, hoping that things load in time?

                  • 6. Re: How to specify fonts in text in SVG file?
                    kevincsftendo Level 1

                    Hi everyone.

                     

                    Feeling a little sheepish now - All of these problems went away when I disconnected from my office VPN. Something about that connection is delaying the delivery of the js files, causing all these errors.

                     

                    It's very repeatable. Turn on the VPN, no edge compositions load in Chrome (and they load slowly in Firefox). Turn it off, and they load fine. Turn it back on, problem reappears.

                     

                    So thanks for your help, but it turns out the problem is apparently nothing to do with Edge Animate at all.

                     

                    I'm removing the above-mentioned zip file - no need for anyone to look at it.