Litmus testing Apple mail 5 not rendering google fonts

Litmus testing Apple mail 5 not rendering google fonts,just blank everywhere....even no fallback showing jus blank space......plz help me to resolve this issue...

Carissa Carissa, 2 years ago

Hi there! Both @font-face and @import should work in Apple Mail according to our tests, so if you wouldn't mind sharing your code, we'd be happy to take a look :)


Carissa
Campaign Monitor
zerocents zerocents, 2 years ago

Litmus is not reliable from my experience. Litmus has failed several times to render fonts in its screenshots where they have rendered perfectly in the actual mail client. There's most likely nothing to worry about; the only way to be sure is to check in Apple Mail 5 itself.


Michael Muscat
crazy1395, 2 years ago
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
        <meta name="format-detection" content="telephone=no" />
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css" />
        <link href="http://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet" type="text/css" />
        <title>Test</title>
        <style type="text/css">
                .text a,.text-left a,.text-center a,.h1 a,.h2 a,.h3 a,.h4 a,.tagline a,.dark2 a,.dark a,.color{ color:#DB4437;text-decoration:none !important;}
            /* ====== Client-specific Styles Bring inline: No ====== */
                #outlook a {padding:0;} 
                .ExternalClass {width:100%;}
                .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
                table td {border-collapse: collapse;}
                        
            /* ====== Mobile Styles Bring inline: No ====== */
            
            @media only screen and (max-width: 640px) {
            
                body {width:auto!important;}
                table[id="backgroundTable"]{background-color:#FFFFFF !important;}
                
                /*-------- container --------*/    
                table[class="outercontainer"] {width:440px !important;}
                table[class="modulecontainer"] {width:380px !important;}
                table[class="fullcontainer"] {width:100% !important;}
                
                /*-------- image --------*/    
                img[class="image-full"]{width:100% !important;height:auto !important;max-width:100% !important;}
                td[class="image-small"] img{width:380px !important;max-width:380px !important;height:auto !important;border-radius:3px;}
                img[class="hide"], td[class="hide"] {display:none !important}
                td[class="increase-height"]{height:20px !important;}
                
                /*-------- headings/text --------*/
                
                td[class="h1"] {font-size:22px !important;text-align:center;}
                td[class="tagline"] {font-size:22px !important;}
                td[class="text-center"] {text-align:center !important;}
                td[class="align-center"] {padding-left:130px;}
            }
            
            
            @media only screen and (max-width: 479px) {
            
                table[id="backgroundTable"]{background-color:#FFFFFF !important;}
                
                /*-------- container --------*/    
                table[class="outercontainer"] {width:280px !important;}
                table[class="modulecontainer"] {width:220px!important;}
                table[class="innercontainer"] {width: 280px!important;}
                table[class="fullcontainer"] {width:100% !important;}
                
                /*-------- image --------*/    
                img[class="image-full"]{width:100% !important;height:auto !important;max-width:100% !important;}
                td[class="image-small"] img{width:220px !important;max-width:220px !important;height:auto !important;border-radius:3px;}
                img[class="hide"], td[class="hide"] {display:none !important}
                td[class="increase-height"]{height:20px !important;}
                td[class="increase-height-20"]{height:20px !important;}
                
                
                /*-------- headings/text --------*/
                td[class="h1"] {font-size:22px !important;text-align:center;}
                td[class="tagline"] {font-size:22px !important;}
                td[class="text-center"] {text-align:center !important;}
                td[class="align-center"] {padding-left:50px;}
            }    
            
        </style>
    </head>
    <body style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;margin: 0;padding: 0;mso-margin-top-alt: 0px;mso-margin-bottom-alt: 0px;mso-padding-alt: 0px 0px 0px 0px;width: 100%;">
        <!-- Wrapper Table -->
        <table width="100%" border="0" cellpadding="0" cellspacing="0" id="backgroundTable" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;margin: 0;padding: 0;background-color: #eaeaea;width: 100%;line-height: 100%;">
            <tr>
                <td align="center" valign="top">
                    <!-- ======= TOP SPACE ====== -->
                    <table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                        <tr>
                            <td height="45" style="font-size:0;line-height:0;" class="hide">&nbsp;</td>
                        </tr>
                    </table>
                    <!-- ======= END TOP SPACE ====== -->
                    
                    <!-- ======= TOP BORDER ====== -->
                    <table width="600" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF" class="outercontainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                        <tr>
                            <td align="left" width="30" height="20" style="font-size:0;line-height:0;"><img src="http://gallery.mailchimp.com/954b8655a427f09676fb8e2b9/images/left_corner.gif" width="30" height="20" class="hide" style="display: block;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" /></td>
                            <td align="left" width="540" height="20" style="font-size:0;line-height:0;"><img src="http://gallery.mailchimp.com/954b8655a427f09676fb8e2b9/images/spacer_20.gif" width="540" height="20" class="hide" style="display: block;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" /></td>
                            <td align="left" width="30" height="20" style="font-size:0;line-height:0;"><img src="http://gallery.mailchimp.com/954b8655a427f09676fb8e2b9/images/right_corner.gif" width="30" height="20" class="hide" style="display: block;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" /></td>
                        </tr>
                    </table>
                    <!-- ======= END TOP BORDER ====== -->
                    
                    <!-- ======= TOP LINKS/LOGO ====== -->
                    <table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="outercontainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                        <tr>
                            <td width="30" height="24" align="left" valign="top" bgcolor="#FFFFFF" style="font-size:0;line-height:0;"><img src="http://gallery.mailchimp.com/954b8655a427f09676fb8e2b9/images/spacer_24.gif" width="30" height="24" class="hide" style="display: block;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" /></td>
                            <td width="540" height="24" align="left" valign="top" bgcolor="#FFFFFF">
                                <!-- logo -->
                                <table border="0" cellpadding="0" cellspacing="0" align="left" class="innercontainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                    <tr>
                                        <td width="85" height="24" align="center" valign="middle" style="font-size:0;line-height:0;"><a href="#" style="color: #DB4437;text-decoration: none;"><img src="" width="85" height="24" alt="itouch" style="max-width: 85px;display: block;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;border: none;" /></a></td>
                                    </tr>
                                    
                                    <tr>
                                        <td valign="top" class="increase-height-20">
                                        </td>
                                    </tr>
                                </table>
                                <!-- end logo -->
                                <!-- top links -->
                                <table border="0" cellpadding="0" cellspacing="0" align="right" class="innercontainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                    <tr>
                                        <td height="24" align="center" valign="middle">
                                            <table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;height:100%;">
                                                <tr>
                                                    <td height="24" align="center" valign="middle" class="toplinks" style="color: #96A5AC;font-family: 'Droid Sans', Arial, Verdana, sans-serif;font-weight: normal;font-size: 13px;line-height: 12px;text-align: center;text-decoration: none;">
                                                        <span style="color: #96A5AC;text-decoration: none;"><a href="#" style="color: #96A5AC;text-decoration: none;">Our site</a></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                        <span style="color: #96A5AC;text-decoration: none;"><a href="#" style="color: #96A5AC;text-decoration: none;">Contact us</a></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                        <span style="color: #96A5AC;text-decoration: none;"><a href="#" target="_blank" style="color: #96A5AC;text-decoration: none;">View online</a></span>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                                <!-- end top links -->
                            </td>
                            <td width="30" height="24" align="left" valign="top" bgcolor="#FFFFFF" style="font-size:0;line-height:0;"><img src="http://gallery.mailchimp.com/954b8655a427f09676fb8e2b9/images/right_space.1.gif" width="30" height="24" class="hide" style="display: block;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" /></td>
                        </tr>
                    </table>
                    <!-- ======= END TOP LINKS/LOGO ====== -->
                    
                    <!-- ======= lower border ====== -->
                    <table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="fullcontainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                        <tr>
                            <td height="20" valign="top" bgcolor="#FFFFFF" style="font-size:0;line-height:0;"><img src="http://gallery.mailchimp.com/954b8655a427f09676fb8e2b9/images/spacer_20.gif" class="image_fix" alt="" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;display: block;" /></td>
                        </tr>
                        <tr>
                            <td height="0" valign="top" class="border-top" style="font-size: 0;line-height: 0;border-top:2px solid #DB4437;"></td>
                        </tr>
                    </table>
                    <!-- ======= end lower border ====== -->
        
                 
            
                  
                    <!-- ======= PRICE TABLE MODULE ====== -->
                    <table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="outercontainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                         <tr>
                            <td align="center" valign="top" bgcolor="#FFFFFF">
                                <table width="540" border="0" cellpadding="0" cellspacing="0" align="center" class="modulecontainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                    <tr>
                                        <td style="border-top:1px #DDDDDD dotted;padding-top:5px;padding-bottom:5px;">
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td align="center" valign="top" bgcolor="#FFFFFF" style="padding-top:50px;padding-bottom:50px;">
                                <table width="540" align="center" class="modulecontainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                    <tr>
                                        <td align="left" class="h1" style="text-align: left !important;color: #495058;font-family: 'Open Sans', Arial, Helvetica, sans-serif;font-size: 26px;font-weight: 300;line-height: 38px;">
                                            Let's choose your plan...
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left" class="text-left" style="padding-top: 10px;padding-bottom: 10px;color: #96A5AC;font-family: 'Droid Sans', Arial, Verdana, sans-serif;font-weight: 400;font-size: 13px;line-height: 24px;text-align: left;">
                                            We have a variety of plans for you to choose from, and ,more importantly, you can upgrade, downgrade, or cancel anytime without worrying about long-term contracts or cancellation fees. <a href="#" style="color: #DB4437;text-decoration: none;">(Read More..)</a>
                                        </td>
                                    </tr>
                                 
                                </table>
                            </td>
                        </tr>
                    </table>
                    <!-- ======= END PRICE TABLE MODULE ====== -->
    

                    
                    <!-- ======= FOOTER ====== -->
                    <table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#F7F7F7" align="center" class="fullcontainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                        <tr>
                            <td align="center" valign="top" bgcolor="#F7F7F7" style="padding-top:25px;padding-bottom:25px;border-top:1px #DDDDDD solid;">
                                <table width="540" border="0" cellpadding="0" cellspacing="0" align="center" class="modulecontainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                    <tr>
                                        <td>
                                         
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <!-- ======= END FOOTER ====== -->
                    
                    <!-- ======= ADDRESS ====== -->
                    <table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="fullcontainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                        <tr>
                            <td class="border-top" style="padding-top:25px;padding-bottom:25px;padding-left:30px;padding-right:30px;border-top:2px solid #DB4437;font-size: 11px;color: #96A5AC;font-family: 'Droid Sans', Arial, Verdana, sans-serif;font-weight: 400;line-height: 24px;text-align: center;"></td>
                        </tr>
                    </table>
                    <!-- ======= END ADDRESS ====== -->
                </td>
            </tr>
        </table>
        <!-- End wrapper table -->
    </body>
</html>

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098