Custom Web Fonts in email

Custom web fonts work on the following clients:

• Most iOS and OSX devices
• Apple Mail
• AOL and Yahoo on OSX and Safari
• Outlook and Outlook.com on OSX and iOS

They do not work on these clients:

• Gmail, including the Gmail apps for iOS or Android.
• Outlook 2007, 2010, 2013.

The following clients will substitute a different font, so they require additional styling hacks.

• AOL and Yahoo on Windows
• Office 365
• Outlook and Outlook.com on Windows

To implement custom web fonts, use the following code, substituting your preferred Google font and fallback fonts.
For my test I embedded The Google font “Satisfy”.
https://fonts.google.com/specimen/Satisfy?selection.family=Satisfy

In the head area:

<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet" />

In the head CSS:

.custom-font,
span.custom-font {
    font-family: 'Satisfy', cursive;
}

To fix the font substitution in Outlook, add this in the head area, targeting your preferred html elements:

    
<!--[if mso]>
    <style type=”text/css”>
    /*fallback if using custom fonts*/
    .custom-font,
    span.custom-font {
      font-family: Verdana,Arial,sans-serif;
    }
    </style>
    <![endif]-->

To fix the font substitution by Yahoo, add this media query.

@media screen yahoo{
    .custom-font,
   span.custom-font {
      font-family: Verdana,Arial,sans-serif;
      font-size: 22px;
      font-weight:normal;
    }
  }

In your email body, add a span tag with class=”custom-font” around any text that you want to use the web font. Web fonts are supported and will show up in Apple mail and iOS mail clients.

 <span class="custom-font">your styled text</span>