Web-Safe font not displaying in iOS emails

user_9513577 0
Viewed 671

Trying to use Impact font in my html email, which is working fine in Outlook 365 windows and web clients, as well as Gmail client in browser, but the iOS native Mail app, Gmail app and Outlook apps all default back to arial. What am I missing?

Here's the table in question. Class is leftover from a MS port, and I'm leaving it in in the hopes that it improves mso performance, but all it's really doing is setting default font-family, font-size and margin (0).

<table cellspacing=0 cellpadding=0 style="background:red;border-collapse:collapse;border:none;padding:0;margin:0;">
  <tr>
    <td style="height: 6.5pt;"></td>
    <td style="height: 6.5pt;"></td>
    <td style="height: 6.5pt;"></td>
  </tr>
  <tr>
    <td style="width:6.5pt"></td>
    <td>
      <p class="MsoNormal" style="margin:0;text-align:center;line-height:normal;font-size:14.0pt;font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;color:white;">
        10% STOREWIDE SALE</p>
      <p class="MsoNormal" style="margin:0;text-align:center;line-height:normal;">
        <a style="font-size:14.0pt;font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;color:white;text-decoration-color: white;" href="https://www.bacs.com.au/store">SHOP NOW</a>
      </p>
      <p class="MsoNormal" style="margin:0;text-align:center;line-height:normal;font-size:10.0pt;font-family:Arial, Helvetica, sans-serif;color:white;">
        Online Only. Ends 30 June 21.</p>
    </td>
    <td style="width:6.5pt"></td>
  </tr>
  <tr>
    <td style="height: 6.5pt;"></td>
    <td style="height: 6.5pt;"></td>
    <td style="height: 6.5pt;"></td>
  </tr>
</table>

html-email email-client css html ios
2 Answers

Impact may not be 'websafe' then, as it appears to NOT be installed on Androids and iOS (mobile), otherwise it would work. Unless the class "MsoNormal" has a different font-family on it. (I would remove that, it's not necessary or related to performance.)

If that fails, you'll need you to use @font-face to load it in from a public website. Keep in mind @font-face is not supported on everything: https://www.caniemail.com/features/css-at-font-face/

As a fallback, you might like to use a similar font, via Google Fonts which is already setup for this: https://fonts.google.com/specimen/Anton

But to make it work on absolutely everything, you'll need to save it as an image, and load in as <img src="https://www.imagehere.com/image.png" alt="Text here">

user_89425660

Apple IOS 13 does not support Impact. MacOS 13 does.

Outlook supports Impact, Google supports Impact.

A similar font is SF Compact, but I am not sure it can be called as a font in email.

Since you're looking for a bold san-serif font, I suggest using the class .MsoNormal and adding the following:

font-family: 'Arial Narrow'; font-weight: bold;

Outlook will skip this, if you put it in an @media call. Google will skip it if you use a Webkit @media call.

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .MsoNormal {/*your code */}
}

Haettenschweiler, 'Arial Narrow Bold' are not web-safe or supported without a webfont url to the typeface.

Good luck.

user_67653960
Related