时间戳

首页 > 解决方案 > 如何在电子邮件模板中自定义谷歌字体

google-font-api - 如何在电子邮件模板中自定义谷歌字体

问题描述

我有一个电子邮件 html，我想使用 Poppins 字体在我的电子邮件中显示文本。但是，它不起作用。我搜索并找到了一些解决方案，但它仍然无法正常工作。

https://css-tricks.com/kinda-can-use-custom-fonts-html-emails/

https://mailbakery.com/blog/fonts-html-emails-limitations-solutions-industry-standards/

https://litmus.com/blog/the-ultimate-guide-to-web-fonts

谢谢阅读。

标签： google-font-api

解决方案

将 Google 字体添加到您的模板

  1. 在此处搜索您的 Google 字体：https ://fonts.google.com 。
  2. 接下来，单击字体，然后单击右上角的“选择此字体”按钮。
  3. 选择字体后，单击浏览器底部最小化的 Family Selected 窗口。
  4. 确保您在“嵌入”选项卡中，然后导航到 @Import 访问此处：https ://help.klaviyo.com/hc/article_attachments/115000293152/2017-05-02_14-33-08.png例如图像。
  5. 在这里，您将看到字体的导入 URL。复制此网址。在此示例中，URL 为： https://fonts.googleapis.com/css?family=Roboto。
  6. 在您的 Klaviyo 模板中，找到并编辑电子邮件中的第一个文本块。单击源按钮以查看原始 HTML。

然后，添加以下 HTML。这包括字体的导入 URL 并指定哪些 HTML 元素将使用该字体：

<style type="text/css">  
   @import url('INSERT_FONT_URL'); 
   p, h1, h2, h3 {  
       font-family: 'INSERT_FONT_NAME', 'INSERT_A_FALLBACK_FONT';  
       } 
</style>

保存块时，您会看到正在使用的新字体。

推荐阅读