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]-->

Recommended topics

Hot tags