Google 我的电子邮件中未显示字体

Question

我无法在电子邮件中显示 Google 字体。它通过我的浏览器在本地显示，但是当我将测试发送到 Gmail、MSO 等时，它不起作用。我可以让 MSO 回退为 Arial，但我不明白我什至无法在 Gmail 上显示它。

这是我在 </head> 和 <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]-->

Answer 1

Gmail 尚不支持 @font-face（位于 google 字体 link 内）。

查看 Campaign Monitor 对网络字体的支持here

来自litmus

Web Fonts in Gmail

Finally, despite have a wildly popular web fonts service, Gmail does not support the use of the @font-face property. Designers that use web fonts in emails should carefully consider their font-stack, as their backup fonts will be rendered in Gmail.

注意： 但是，如果您使用像 campaign monitor 这样的服务，您可以让 gmail 呈现网络字体，因为他们使用一些特殊功能来处理这个问题。

Google 我的电子邮件中未显示字体

Google Fonts Not Displaying in my Email

html

css

html-email

google-webfonts