There seems to be an issue in litmus where webfonts do not render fast enough and are omited from screenshots as these clients are waiting until the font has loaded before showing the text. Has anyone else experienced this?

Here is a comparison that would help:

For this round of testing you can see that the client Apple Mail 8 has not rendered the text at the time of the screenshot:
https://litmus.com/checklist/tests/3086091#appmail8

However, the same round of testing, iOS has rendered the text:
https://litmus.com/checklist/tests/3086091#iphone5sios8

I’m not sure this issue would not be related to the case of having the font installed or not as the email itself is requesting the webfont from our servers, and when I go into the same mail app but as a live test on my mac the text shows up.

I’m trying to work out if the delay between litmus taking a screenshot of the email on iOS and on mac/desktop is different or if there is something else happening, as when showing some clients the litmus tests they are getting blank space where text is not showing, implying the email is not working, while a live test shows the text loading perfectly fine.

However, the same issue is being seen for android 4.4, but we cannot verify this is working in a live environment as we do not have testing devices for this, which is why we use litmus.

Code span below (removed the direct link to our server that is hosting the font for privacy)




      @font-face {
            font-family: 'freightsanslfpromedium';
            src: url('LINK TO WEBFONT') format('woff');
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: 'freightsanslfproregular';
            src: url('LINK TO WEBFONT') format('woff');
            font-weight: normal;
            font-style: normal;
        }



        @media screen { 
            .webfont1 {
                font-family: "freightsanslfpromedium", arial, sans-serif !important;
            }
            .webfont2 {
                font-family: "freightsanslfproregular", arial, sans-serif !important;
            }
        }


         <td class="webfont1">example text</td>