<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
然后我也做了一个样式声明，我使用@ font-face来定义这个自定义字体。 （我已经删除了下面的cloudapp链接，因为它们被缩短了，但是我已经根据这个例子https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_font-face_rule_bold检查了这些列表，看看这些链接是否有效（通过将我的链接替换为他们的链接）并且它保持在那里也是。
<style type="text/css">
@font-face {
font-family:'montreal-regularregular';
src:url([the actual Url hosted on cloudapp]) format("woff2"),
url([the actual Url hosted on cloudapp]) format("woff")
url([the actual Url hosted on cloudapp]) format('truetype'); font-weight:normal; font-style:normal;}
@font-face {
font-family:'montreal-boldregular';
src:url([the actual Url hosted on cloudapp]) format("woff2"),
url([the actual Url hosted on cloudapp]) format("woff"); font-weight:normal; font-style:normal;}
@font-face {
font-family:'montreal-mediumregular' !important;
src:url([the actual Url hosted on cloudapp]) format("woff2") !important,
url([the actual Url hosted on cloudapp]) format("woff")!important,
url([the actual Url hosted on cloudapp]) format('truetype')!important; font-weight:normal; font-style:normal;}
@font-face {
font-family:'montreal-demiboldregular';
src:url([the actual Url hosted on cloudapp]) format("woff2"),
url([the actual Url hosted on cloudapp]) format("woff")
url([the actual Url hosted on cloudapp]) format("truetype"); font-weight:normal; font-style:normal;}
你会看到我已经包含!important（虽然它看起来也没用）。然后当我在<td>中稍后引用该字体时，我这样做：
<body style="font-family: montreal-regularregular,Lucida Grande, Lucida Sans Unicode, Tahoma, Sans-Serif; margin: 0">
<table align="center" style="max-width:600px;min-width:360px;width:100%;background:#ffffff;padding-bottom:30px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" style="padding:20px 30px 5px 30px;text-align:center;">
<p style="margin:0 20px;font-family:montreal-mediumregular, Lucida Grande, Lucida Sans Unicode, Tahoma, Sans-Serif; color:#000000;font-size:15px;line-height:25px;padding:20px 0px 25px 0px;text-align:left;">
Welcome back to the weekend If you’re looking for a break from the boring weekday work vibes, then why not try something new?
</p>
所以你会看到我有很多次尝试包含它，但仍然没有运气。知道我搞砸了什么吗？
答案 0 :(得分：1)
当您在浏览器中打开电子邮件模板时，它是否有效？问题是，HTML Mails是一件棘手的事情，特别是涉及CSS标准时，所有浏览器都支持多年。目前只有少数邮件客户端（见下文）支持@font-face，所以这可能是原因，为什么这不起作用，因为我不知道你的目标客户端是什么。请注意，一些最常见的客户端，如GMail，Inbox，最新的Outlook for Windows或Yahoo Mail不支持此功能（2018年4月）！
支持@font-face
桌面
移动
Webmail
编写HTML邮件模板可能非常痛苦，因此您可能需要查看我上面链接的页面，以找出可以安全使用的内容。遗憾的是，它不会像现代浏览器支持的那样多，但是你应该避免像<head>中的CSS声明这样的事情（总是使用HTML邮件的内联CSS，这是我所推荐过的唯一的事情），使用{ {1}}用于布局（我明白，你实际上是这样做的），并且总是检查你想要应用的CSS规则。
因此，如果您想将购买的字体用于标题，则可以使用图像。但如果您想将它用作正文字体，这实际上不是一个好主意。
答案 1 :(得分：0)
请注意，某些字体格式不适用于所有浏览器;您可以使用fontsquirrel.com's generator来避免过多转换。
您可以找到一系列由Google字体提供的免费网络字体（也有自动生成的CSS @ font-face规则，因此您无需自行编写）。
此外：
@font-face {
font-family: 'MyWebFont';/*a name to be used later*/
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
或更好的现代浏览器
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
同时，请确保在引用自定义字体时使用单引号或双引号。 例如
p{ font-family: 'montreal-mediumregular', Lucida Grande, Lucida Sans Unicode, Tahoma, sans-serif;}
这应该有用。
答案 2 :(得分：0)
以下是使用Google字体代码的示例。希望这可以让您了解代码中出错的位置。 注意：网络字体不适用于所有电子邮件客户端。如需支持，请查看@Mattias＆＃39;在上面列出。
/* latin-ext */
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 400;
src: local('Signika Regular'), local('Signika-Regular'), url(https://fonts.gstatic.com/s/signika/v8/vEFR2_JTCgwQ5ejvG18mBkho.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: 'Signika';
font-style: normal;
font-weight: 400;
src: local('Signika Regular'), local('Signika-Regular'), url(https://fonts.gstatic.com/s/signika/v8/vEFR2_JTCgwQ5ejvG1EmBg.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;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
</head>
<body style="font-family: 'Signika',Lucida Grande, Lucida Sans Unicode, Tahoma, Sans-Serif; margin: 0">
<table align="center" style="max-width:600px;min-width:360px;width:100%;background:#ffffff;padding-bottom:30px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" style="padding:20px 30px 5px 30px;text-align:center;">
<p style="margin:0 20px;font-family:'Signika', Lucida Grande, Lucida Sans Unicode, Tahoma, Sans-Serif; color:#000000;font-size:15px;line-height:25px;padding:20px 0px 25px 0px;text-align:left;">
Welcome back to the weekend If you’re looking for a break from the boring weekday work vibes, then why not try something new?
</p>
</td>
</tr>
</table>
</body>
</html>
干杯