Litmus testing- Apple mail 5 not rendering google fonts

<!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>
crazy1395, 2 years ago

Issue resolved by using max-device-width instead of max-width

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