Menu
I am having trouble getting Google fonts to display in my email. It displays on locally through my browser but when I send tests to Gmail, MSO, etc., it is not working. I am able to get MSO fallback to be Arial, but I don't understand how I am not getting it to display even on Gmail.
Here is what I have in the </head> and immediately after the <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]-->
386
Yes, but with a couple caveats. Keep in mind Google Fonts (and any other webfont) isn't yet compatible with major email clients, such as Gmail, Outlook, Yahoo and AOL!
Potential Cause. There is an error in the API URL, or a style that is not supported by the font has been requested.
Gmail doesn't support @font-face(which is inside of a google-font link) yet.
Take a look at the support here at Campaign Monitor for web fonts
From litmus
Web Fonts in Gmail
Finally, despite have a wildly popular web fonts service, Gmail does not support the use of the @font-face property. Designers that use web fonts in emails should carefully consider their font-stack, as their backup fonts will be rendered in Gmail.
NOTE: However, you can make gmail render webfonts if you use a service like campaign monitor, since they use some special feature to treat this.
95
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
