Web 字体无法应用于在浏览器上工作的时事通讯（GMAIL、Yahoo Mail、Outlook、Hotmail 等）

Question

我有一份简报，其中使用了网络字体 Proxima Nova Extra Bold 和 Proxima Nova Alt Regular。当我在浏览器上打开时事通讯布局时，所有文本的字体都显示正常。但是当在 Gmail 或 Yahoo 或其他邮件客户端中打开相同的时事通讯时，字体不会应用于文本。

浏览器布局截图（字体显示完美）：

Gmail 布局截图（未截取字体）：

这是我将字体应用到时事通讯文件的方式：内部 <head> 标签：

<style type="text/css">
@import url("http://serverdomainname/emailtemplatefonts.css");
body{font-family:ProximaNova-AltRegular !important;}
        </style>

通过内联设置样式 css

<span style="padding:25px;text-align:center;display:block;font-size:14px;font-family:ProximaNova-AltRegular">Discover attractions, restaurants, nightlife, and accomodations around the world. Use specialized filters in your search to find free museums, family friendly restaurants, weird and wonderful hotels, and much more. </span>

这里是css包含的字体文件:

@font-face {font-family: 'ProximaNova-AltRegular';
font-weight: normal;font-style: normal;
src: url('http://sitedomain.com/assets/fonts/proxima_nova_alt/ProximaNovaAltRegular.woff2') format('woff2');}



@font-face {font-family: 'ProximaNova-Extrabold';
font-weight: normal;font-style: normal;
src: url('http://sitedomain.com/assets/fonts/proxima_nova_bold/ProximaNovaExtrabold.woff2') format('woff2');}

Answer 1

Gmail 和其他电子邮件客户端将删除 HTML 中的 <style> 标记。我不知道有什么办法解决这个问题。如果您 want/need 为页眉或其他使用自定义字体，不幸的是，最可靠的方法是插入字体图像。

Answer 2

许多电子邮件客户端不支持网络字体。即使他们这样做了，你也必须跳过很多环节，比如在 head 和 body 之间移动 style 标签。

以下是对各种电子邮件客户端的网络字体支持的总结：

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

准备一些黑客攻击并考虑回退到标准字体（但最好不要使用图像，因为这会限制您的电子邮件的可访问性）。

Answer 3

Most email clients don't support web fonts, and no popular webmail services do。即使您引用的是 Proxima Nova，您在 Gmail/Yahoo 中实际看到的字体是默认系统无衬线字体（因为您的字体堆栈中没有后备字体）

电子邮件客户端中的 Web 字体支持 isn't great, so fallback system fonts are important. You can reference web fonts using the <link href=''> tag 而不是 @import 以稍微增加您的覆盖范围。

Web 字体无法应用于在浏览器上工作的时事通讯（GMAIL、Yahoo Mail、Outlook、Hotmail 等）

Web fonts fails to apply in newsletter (GMAIL , Yahoo Mail , Outlook, Hotmail etc) working on browser though

html

css

email

webfonts

newsletter