htmlcsshtml-emailgoogle-webfonts

Google Fonts Not Displaying in my Email

I am having trouble getting Google fonts to display in my email. It displays on locally through my browser but when I send tests to Gmail, MSO, etc., it is not working. I am able to get MSO fallback to be Arial, but I don't understand how I am not getting it to display even on Gmail.

Here is what I have in the </head> and immediately after the <body>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta property="og:title" content="*|MC:SUBJECT|*">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="format-detection" content="telephone=no">



  <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet' type='text/css'>


  <style type="text/css">
    /* /\/\/\/\/\/\/\/\/ MAIL CLIENT & BROWSER-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
    #outlook a {
      padding: 0;
    }
    .ReadMsgBody {
      width: 100%;
    }
    .ExternalClass {
      width: 100%;
    }
    .ExternalClass,
    .ExternalClass p,
    .ExternalClass span,
    .ExternalClass font,
    .ExternalClass td,
    .ExternalClass div {
      line-height: 100%;
    }
    body,
    table,
    td,
    p,
    a,
    li,
    blockquote {
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }
    table,
    td {
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }
    img {
      -ms-interpolation-mode: bicubic;
    }
    /* /\/\/\/\/\/\/\/\/ MAIL CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
    /* /\/\/\/\/\/\/\/\/ CLASSES /\/\/\/\/\/\/\/\/ */
    body {
      width: 100% !important;
    }
    body {
      -webkit-text-size-adjust: none;
    }
    body {
      margin: 0;
      padding: 0;
    }
    img {
      border: none;
      font-size: 14px;
      font-weight: bold;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
      text-transform: capitalize;
    }
    #backgroundTable {
      height: 100% !important;
      margin: 0;
      padding: 0;
      width: 100% !important;
    }
    table {
      border-collapse: collapse !important;
    }
    body,
    .backgroundTable {
      background-color: #ffffff;
    }
    #templateContainer {
      border: 0px;
    }
    /* /\/\/\/\/\/\/\/\/ PREHEADER /\/\/\/\/\/\/\/\/ */
    #templatePreheader {
      background-color: #ffffff;
    }
    .preheaderContent div {
      color: #bbbbbb;
      font-family: Arial;
      font-size: 10px;
      line-height: 100%;
      text-align: center;
    }
    .preheaderContent div a:link,
    .preheaderContent div a:visited {
      color: #8fa7d1;
      font-weight: normal;
      text-decoration: underline;
    }
    .preheaderContent div img {
      height: auto;
      max-width: 800px;
    }
    /* /\/\/\/\/\/\/\/\/ PREHEADER /\/\/\/\/\/\/\/\/ */
  </style>
</head>

<body>
  <!--[if mso]>
<style type="text/css">body, table, td {font-family: Arial, Helvetica, sans-serif !important;}</style><![endif]-->
  <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
  <!--[if gte mso 15]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
  <!--[if (gte mso 9)|(IE)]><table width="800" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border: 0px; "><tr><td><![endif]-->

Solution

  • Gmail doesn't support @font-face(which is inside of a google-font link) yet.

    Take a look at the support here at Campaign Monitor for web fonts

    SS

    From litmus

    So you might be wondering, “What about Gmail? We are using Google Fonts after all.” You’d think that as Gmail is a Google product and Google Fonts is a Google product, they’d play nicely together. But alas, that’s not the case. Web fonts do not work in Gmail even if they are a Google Font and even if you use the code supplied by Google. The one exception for this is Roboto

    NOTE: However, you can make gmail render webfonts if you use a service like campaign monitor, since they use some special feature to treat this.