3
私のメールにGoogleフォントが表示されない。ブラウザからローカルに表示されますが、GmailやMSOなどにテストを送信しても機能しません。私はMSOのフォールバックをArialにすることができますが、Gmailでも表示されない方法はわかりません。ここでGoogleフォントがメールに表示されない
は、私が</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は[カスタムスタイルのタグをサポートしていません]（http://stackoverflow.com/questions/1555171/why-is-gmail-blocking-css-in-メール）、これはカスタムフォントが表示されない理由です。 – APAD1
エイドリアンありがとうございます。私はすべてのタイプのインラインスタイルを使用しています。 –