9 Replies Latest reply on Jun 30, 2016 7:48 AM by themightyant

    Typekit fonts not ALL showing up IOS Safari

    themightyant Level 1

      HI I am using Typekit and to avoid FOUC (Flash of unstyled content) I am using the Font event classes .wf-loading, .wf-active (.wf-inactive not currently used)

       

      However on the latest version of Safari (iOS) not all the text is reappearing on some pages.  Steps to recreate the problem

      1. Go to this link » Eastern
      2. Scroll down to the bottom of the page and click on any of the 3 related news articles (images, titles or readmore)
      3. Scroll to the bottom of the page, the footer menu is not appearing.

       

      Any help greatly appreciated.

       

      My CSS for that area is as follows

      /* Hides FOUC on webfont load */

      .wf-loading h1, .wf-loading h2, .wf-loading h3, .wf-loading h4, .wf-loading h5, .wf-loading h6, .wf-loading p, .wf-loading li {

          visibility: hidden;

      .wf-active h1, .wf-active h2, .wf-active h3, .wf-active h4, .wf-active h5, .wf-active h7, .wf-active p, .wf-active li{

          visibility: visible;

      }

       

      My JS is

      // Typekit advanced method

      (function(d) {

          var config = {

              kitId: 'fms0osf',

              scriptTimeout: 3000,

              async: true

          },

          h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading \b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElements ByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange =function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try {Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)

      })(document);

       

      Other things I have checked.  Page validates. there are no JS or PHP errors and I have tried the other Typekit method.

        • 2. Re: Typekit fonts not ALL showing up IOS Safari
          Liz, Typekit Support Adobe Employee

          Hi themightyant,

           

          I'm sorry that you ran into trouble with this! We haven't been able to reproduce the problem you're describing on iOS; did you get it figured out?

           

          If not, would you please post a screenshot here of how the footer looks to you in Step 3?

           

          And if you haven't already done so, would you try removing your .wf-loading/.wf-active CSS rules temporarily, to confirm that they are related?

           

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

          -- liz

          • 3. Re: Typekit fonts not ALL showing up IOS Safari
            themightyant Level 1

            Hi Liz,

            many thanks for the reply.  Sadly I have not resolved the problem. 

            Below are two images of the site on iOS (iPad).

             

            1. The first shows the footer with  .wf-loading/.wf-active CSS rules and NO footer text showing
            2. The second illustrates how the footer looks (correctly) when .wf-loading/.wf-active CSS rules are removed. 

             

            I have confirmed this is also occurring on iOS on iPhone and is not device specific.  I am currently testing on other devices too.

            I will continue to check and refactor the code in the meantime to isolate the problem

             

            typekit-not-working.PNG

             

            typekit-working.PNG

            • 4. Re: Typekit fonts not ALL showing up IOS Safari
              Liz, Typekit Support Adobe Employee

              Thanks for this update! One of our engineers tested your site on iOS and confirmed that there isn't anything wrong with your Typekit implementation, and the fonts are working as expected for him as well.

               

              Would you please go to this Typecheck page on one of your devices and post a copy or screenshot of the results?  We'd like to make sure we're testing in the same iOS and browser versions that you're using:

               

              https://typekit.com/typecheck#no-site 

               

              Thanks again,

              -- liz

              • 5. Re: Typekit fonts not ALL showing up IOS Safari
                themightyant Level 1

                Thanks for the follow up Liz.   Are they running through all 3 steps?  Strangely the fonts appear OK on first load it is only when I go to a second news article that this arises. #puzzled

                 

                Device settings as per below

                 

                IPAD

                ✔ Your browser is Mozilla/5.0 (iPad; CPU OS 9_3_2 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13F69 Safari/601.1

                ✔ Your browser referrer is sent

                ✔ Font events are working

                 

                IPHONE

                ✔ Your browser is Mozilla/5.0 (iPhone; CPU iPhone OS 9_3_2 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13F69 Safari/601.1

                ✔ Your browser referrer is sent

                ✔ Font events are working

                • 6. Re: Typekit fonts not ALL showing up IOS Safari
                  Liz, Typekit Support Adobe Employee

                  Thanks for the browser & iOS details. Bram (one of our engineers) and I are testing in the same versions that you're using, and I've confirmed that we're both doing all three steps as you described.

                   

                  I was able to reproduce the issue one time, by clearing the browser cache and then restarting my phone, but doing the same again didn't show the issue. The fonts are loaded as expected after clicking on the post title or read more on your webpage in seven out of eight tests. 

                   

                  We're really scratching our heads on this! Our best guess is that it has something to do with the timing of loading the assets in the browser on iOS that causes it to not work consistently in your testing. Unfortunately since we are unable to reproduce it consistently ourselves, we haven't been able to track it down to a specific cause.

                   

                  Right now, the best recommendation that we can make is to remove the font event on the footer navigation, so you can be sure that it loads on every page view even on iOS.  We are going to do some more testing as well, and will update you here with any progress!

                   

                  Let me know if you have any other questions in the meantime,

                  -- liz

                  • 7. Re: Typekit fonts not ALL showing up IOS Safari
                    themightyant Level 1

                    Thanks again for the follow up Liz (and Bram) it is very much appreciated.

                     

                    I fully understand it's a very puzzling one and your logic regarding removing the font event on the footer is spot on. 

                    I have already tested that fix and it works, but have removed it again for now as the site is still in development.  I will apply that for launch if there is no other solution, though this is workable.

                     

                    One thing I did realise is that it ONLY appears to be happening when I click on the image of the next post NOT on the title or read more.  I was incorrect in my initial post, I just realised I only ever clicked the image.  I've gone over it, double checked and refactored the code same result.  It must be a browser quirk.  Back to the earlier IE days ;-)

                    • 8. Re: Typekit fonts not ALL showing up IOS Safari
                      Liz, Typekit Support Adobe Employee

                      Hey Antony,

                       

                      Thanks for this update! I was using the "read more" link every time (except that once, I suppose), which explains why I wasn't seeing it.  Clicking on the image does repeat the issue consistently for me, too.

                       

                      And I think we might have figured it out: there is a conflict between when the browser applies the font event CSS and this rule in the style.css files:

                       

                      /* Animation and filters */

                      .animate-all, .menu-item a {

                          -webkit-transition: all 300ms;

                          -moz-transition: all 300ms;

                          -ms-transition: all 300ms;

                          -o-transition: all 300ms;

                          transition: all 300ms;

                      }

                       

                      If I remove the .menu-item a selector so that the transition is not applied to the links, the fonts load in the footer every time I click on the image to get to the next page.  Using other values for the transition, such as transition: color .3s, also fixes it.

                       

                      Please give that a try, and see if it solves it for you as well! Best,

                      -- liz

                      1 person found this helpful
                      • 9. Re: Typekit fonts not ALL showing up IOS Safari
                        themightyant Level 1

                        Thanks so much Liz.  That has solved it! 

                        Very much appreciated.
                        -- Antony