outlookgmailhtml-emailapple-mail

Using browser system font stack in html email

Do system font stacks, e.g. something like...

<p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"> Whatever sans-serif font, but please use that ugly Arial as a last resort only </p>

...work in common email clients too?

I've tested it on my own devices (Outlook 2017 & Android App, Android E-Mail, Gmail Web & Android App), and it seems to work so far.

But what about Apple? I've got no devices to test and I don't know if I have to use the system name or the font's real name.

Solution

  • Yes, system fonts work in EVERY email client, including every Apple product on Mac OS (Apple Mail, Outlook for Mac, etc.) and iOS (iPhone Mail, iPad Mail, Gmail for iOS, etc.)

    The font stack works just like it would on the web. Using your example:

    <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"> Whatever sans-serif font, but please use that ugly Arial as a last resort only </p>
    1. If -apple-system is installed, display that.
    2. Else if BlinkMacSystemFont is installed, display that.
    3. Else if Segoe UI is installed, use that.

    And so on.

    GitHub uses a font stack with 100% system fonts that covers most bases, just as an example:

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"