Body of email not appearing in correct font on iPhone and iPad

[cae154]

Hello everyone,

I've created an html email signature and have chosen 12px Verdana as the font. I've loaded the signature into Apple mail and have chosen Verdana 12px font for the body of the email (to match the signature). When I test it, Verdana appears in both the signature and body of the email on my iMac computer but when I view the email on my iPhone or iPad, the text for the body of the email appears in a different font and larger - the email signature though is appearing in Verdana.

There's also another issue with the final paragraph being justified but the text is appearing left aligned in all versions of Outlook - here is the code for the signature:

<table rules="none" border="0" cellspacing="0" cellpadding="0" style="border:0" width="379
                                                                                                          ">
  <tbody>
    <tr>
      <td><table border="0" cellspacing="0" cellpadding="0" style="border:0">
          <tbody>
            <tr>
              <td valign="top" style="border:0;padding-bottom:15px;padding-right:8px;line-height:0px"><a href="http://www.site.com.au" target="_blank"><img src="https://www.site.com.au/media/website_designs/3/img/placeholder-logo.jpg" alt="" nosend="1" border="none" height="24" width="265"></a></td>
            </tr>
            <tr>
              <td valign="top" style="border:0;padding-left:0px"><table border="0" cellspacing="0" cellpadding="0">
                  <tbody>
                    <tr>
                      <td valign="top" style="border:0;border-left:1px solid #497494;padding-left:5px"></td>
                      <td valign="top"><table border="0" cellspacing="0" cellpadding="0">
                          <tbody>
                            <tr>
                              <td valign="top" nowrap="" style="white-space:nowrap;padding-top:0px;border:0;padding-bottom:12px;line-height:14px"><span style="font-family:Verdana,sans-serif;;font-size:12px;color:#497494;line-height:14px;font-weight:bold">Name Here</span><span style="font-family:Verdana,sans-serif;;font-size:12px;color:#595959;line-height:13px"><span style="font-size:12px;color:#497494;line-height:14px">&nbsp;•&nbsp;</span>Title Here</span><br></td>
                            </tr>
                            <tr>
                              <td valign="top" style="white-space:nowrap;border:0;font-size:12px;;line-height:17px"><span style="white-space:nowrap;font-family:Verdana,sans-serif;;display:inline-block;margin-left:-2px;line-height:17px;font-size:12px;color:#595959"><img valign="bottom" src="https://www.site.com.au/media/website_designs/3/img/phone-blue.png" alt="" nosend="1" border="none" height="17" width="17"><span style="font-family:Verdana,sans-serif;;font-size:12px;color:#595959;font-weight:normal"> <a href="tel:(+61) 2 9247 0100" target="_blank" style="font-family:Verdana,sans-serif;;font-size:12px;;color:#595959;font-weight:normal">(+61) 3 925 0000</a></span></span><span>&nbsp; </span><span style="white-space:nowrap;font-family:Verdana,sans-serif;;display:inline-block;margin-left:-2px;line-height:17px;font-size:12px;color:#595959"><img valign="bottom" src="https://www.site.com.au/media/website_designs/3/img/email-blue.png" alt="" nosend="1" border="none" height="17" width="17"><span style="font-family:Verdana,sans-serif;;font-size:12px;color:#595959;font-weight:normal"> <a href="mailto:name@site.com.au" target="_blank" style="font-family:Verdana,sans-serif;;font-size:12px;;color:#595959;font-weight:normal">name@site.com.au</a></span></span><br>
                                <span style="font-family:Verdana,sans-serif;;display:inline-block;margin-left:-2px;line-height:17px;font-size:12px;color:#595959"><img valign="bottom" src="https://www.site.com.au/media/website_designs/3/img/address-blue.png" alt="" nosend="1" border="none" height="17" width="17"><span style="font-family:Verdana,sans-serif;;font-size:12px;color:#595959;font-weight:normal"> <a href="https://maps.google.com/?q=Level+4%2C+234+George+Street%2C+Sydney+NSW+2000" target="_blank" style="font-family:Verdana,sans-serif;;font-size:12px;;color:#595959;font-weight:normal">Level 4, 100 Sample Street, Melbourne NSW 3000</a></span></span><br>
                                <span style="white-space:nowrap;font-family:Verdana,sans-serif;;display:inline-block;margin-left:-2px;line-height:17px;font-size:12px;color:#595959"><img valign="bottom" src="https://www.site.com.au/media/website_designs/3/img/address2-blue.png" alt="" nosend="1" border="none" height="17" width="17"><span style="font-family:Verdana,sans-serif;;font-size:12px;color:#595959;font-weight:normal"> <a href="https://maps.google.com/?q=GPO+Box+4334+Sydney+NSW+2001" target="_blank" style="font-family:Verdana,sans-serif;;font-size:12px;;color:#595959;font-weight:normal">GPO Box 0000 Melbourne VIC 3001</a></span></span><span>&nbsp; </span><span style="white-space:nowrap;font-family:Verdana,sans-serif;;display:inline-block;margin-left:-2px;line-height:17px;font-size:12px;color:#595959"><img valign="bottom" src="https://www.site.com.au/media/website_designs/3/img/web-blue.png" alt="" nosend="1" border="none" height="17" width="17"><span style="font-family:Verdana,sans-serif;;font-size:12px;color:#595959;font-weight:normal"> <a href="http://www.site.com.au" target="_blank" style="font-family:Verdana,sans-serif;;font-size:12px;;color:#595959;font-weight:normal">www.site.com.au</a></span></span></td>
                            </tr>
                          </tbody>
                        </table></td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
          </tbody>
        </table></td>
    </tr>
    <tr>
      <td style="padding-top:5px;border:0;line-height:0"></td>
    </tr>
    <tr>
      <td style="white-space:nowrap;padding-top:12px;border:0;font-family:sans-serif"><a style="font-family:sans-serif" href="http://www.site.com.au" target="_blank"><img src="https://www.site.com.au/media/website_designs/3/img/placeholder-awards.jpg" alt="" nosend="1" border="none" height="104" width="379"></a></td>
    </tr>
    <tr>
      <td style="padding:0;padding-top:12px;border:0;line-height:0;border-bottom:1px solid #969696"></td>
    </tr>
    <tr>
      <td align="justify" style="padding:0;padding-top:2px;border:0;line-height:14px;width:200px;word-break:break-word"><span style="font-family:Verdana,sans-serif;color:#828282;line-height:14px;font-size:12px">Pudaestrum et eossit la nonsedit, qui officim poreriate consereperum nihilis pa sim re nonsequ iatinus cipidel iquatia dusa si omnimin ihillec tatus, solut optas atae eaquiae cum quam et volorporem dolor reic tecto volor alis explaut labo. Officiet omnihil latibus aligent orument volor si rate ium utenias volore ex et arunt.</span></td>
    </tr>
  </tbody>
</table>

Can someone please tell me why this is happening and if there's a workaround?

Thanks

 

[spamjim]

There's nothing in your HTML that includes the Verdana font. The HTML only suggests the Verdana font if it is installed on the system. If the system does not have Verdana, it falls back to any sans-serif font.

Verdana is typically installed with Microsoft applications, such as Office. You may have Office installed on your Mac, which is why you would only see the font there.

There are many articles on the web about how to specify fonts in web and email contexts.