2 Replies Latest reply: Feb 18, 2014 7:06 PM by keithleyson RSS

    Custom fonts not loading while Edge Animation inside an iFrame

    keithleyson Community Member

      Hi can someone help me with this strange problem? Custom fonts, specifically, Typekit fonts I used in my Edge Animate animation is not loading IE 11 when the animation is inside an iFrame. If you view the animation HTML directly on the browser, the fonts load perfectly fine.

       

      Here is an example where the animation is inside an iFrame and part of a webpage where fonts are not loaded when using IE11.

      http://www.pandaequipment.com/test/contact.html

       

      and here is the HTML file directly where fonts and loaded fine in IE 11

      http://www.pandaequipment.com/test/edgeanimate_assets/myhero/Assets/myhero.html

       

      All the other browsers I tested don't have this problem.

       

      Can someone tell me some ways to fix this in IE?

        • 1. Re: Custom fonts not loading while Edge Animation inside an iFrame
          Liz, Typekit Support Adobe Employee

          Hi Keith,

           

          I'm sorry that you ran into trouble with this.  I also saw this issue when I tested your site in Chrome on OS X 10.9, although the fonts worked on reload because they were then cached in the browser.

           

          I suspect the the issue is in the "src" attribute on the iframe:

          iframe allowtransparency="true" frameborder="0" scrolling="no" src="edgeanimate_assets/myhero/Assets/myhero.html"

           

          Would you try changing the src to a full path, and see if the fonts load into the iframe?

          iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.pandaequipment.com/test/edgeanimate_assets/myhero/Assets/myhero.html"

           

           

          Background:  Typekit gets the domain name from the browser referrer and uses it to check that the site matches the listing on your kit.  This is one of the security layers to make sure someone can't steal your Typekit fonts and use them on their own site.  When loading fonts into an iframe, the iframe referrer needs to match as well.

           

          If the iframe referrer doesn't match or is blank, the behavior is browser-specific.  Some browsers will use the referrer of the parent page and so the fonts load, while others don't apply the fonts at all.


          Setting the iframe src to the full URL should ensure that a referrer is sent, and may fix this issue.

           

          Please give that a try, and let me know how it goes!  Thank you,

          -- liz

          • 2. Re: Custom fonts not loading while Edge Animation inside an iFrame
            keithleyson Community Member

            Thank you for that explanation. However, after doing the necessary scr change, it still doesn't want to load the font. Below is a screenshot of the page in IE11.

            Capture.JPG

             

            I think I see another problem with IE11.

            Please try to view this in IE 11 http://www.pandaequipment.com/test/edgeanimate_assets/myhero/Assets/myhero.html

            You will notice that the fonts are also not loading. Only in IE.