谷歌字体未显示在我的电子邮件中答案

【问题标题】：Google Fonts Not Displaying in my Email谷歌字体未显示在我的电子邮件中
【发布时间】：2016-06-29 14:55:37
【问题描述】：

我无法让 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]-->

【问题讨论】：

对于电子邮件，您应该使用内联 CSS。 Gmail does not support style tags 这很可能是您看不到自定义字体的原因。
谢谢阿德里安。我对所有类型都使用内联样式。
新外观。相同的可靠性。

标签： html css html-email google-webfonts

【解决方案1】：

Gmail 尚不支持 @font-face（位于 google-font 链接中）。

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

来自litmus

Gmail 中的网络字体

最后，尽管有广受欢迎的网络字体服务，Gmail 确实如此不支持使用@font-face 属性。使用网络的设计师电子邮件中的字体应该仔细考虑它们的字体堆栈，因为它们备份字体将在 Gmail 中呈现。

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

【讨论】：

谢谢迪帕斯。我想最令人沮丧的部分是我已经阅读了如此多的文章、帖子、论坛等，这些文章、帖子、论坛等为人们提供了如何完成这项工作的指导。用户评论说它有效。
谢谢迪帕斯。这有帮助。
@MikeDeraco 我在回答中添加了一条通知，仅供参考