Custom web fonts work on the following clients:

  • Most iOS and OSX devices
  • Apple Mail
  • AOL and Yahoo on OSX and Safari
  • Outlook and 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 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”.

In the head area:

<link href="" rel="stylesheet" />

In the head CSS:

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*/
    span.custom-font {
      font-family: Verdana,Arial,sans-serif;

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

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

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>