如何将字体家族样式添加到HTML电子邮件模板

时间:2018-09-04 08:15:22

标签: css email templates fonts

嘿,我在向我的确认模板中添加字体样式时遇到了问题,订单完成后我将其发送给我的客户电子邮件。 我知道内联CSS可以很好地与html电子邮件模板配合使用,但是我正尝试从Google添加Heebo字体家族,并且可以将其加载到head标记中,而该标记不适用于gmail和hotmail。

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet"></head>

现在这是我的头。 但是它不能像我说的那样在gmail或hotmail中工作。

3 个答案:

答案 0 :(得分:0)

快速解答。你做不到。

出于安全原因,

gmail,hotmail,Outlook等会阻止外部字体。

因此,邮件通常是使用图片而不是100%文本制作的。

如果您不想使用图像,则必须使用安全字体(所有操作系统中都存在的字体)。

祝你好运

答案 1 :(得分:0)

我这样包含它。您可以从Google网络字体中获取。 这适用于Outlook(IOS),Apple Mail,iPad,iPhone。其余的不支持网络字体。因此,您应该有一个默认使用的后备字体。

理想情况下,您的电子邮件应该是基于实时文本/图像的混合。
现在基于100%的图像有点过时了,因为当浏览器自动隐藏图像,无法搜索任何内容或突出显示任何有用的信息(例如产品名称)时,您看不到任何内容。

关于此的有用文章:https://litmus.com/blog/the-ultimate-guide-to-web-fonts

@media screen {
 /* latin-ext */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: local('Raleway Bold'), local('Raleway-Bold'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwJYtWqhPANqczVsq4A.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: local('Raleway Bold'), local('Raleway-Bold'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwJYtWqZPANqczVs.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
}

答案 2 :(得分:-1)

我尝试为电子邮件模板添加字体,它从系统字体中采用 Arial,没有使用添加 Google 字体 cdn 链接