I have a custom typekit font used in an email signature with Georgia used as the fallback font.
On a mobile device, it will not fallback on Georgia. However, Georgia will load if I remove the custom font.
Am I missing anything?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Signature</title>
<style type="text/css">
@import url("https://use.typekit.net/rzf8bdg.css");
body {
font-family: 'Bressay', Georgia, sans-serif;
font-weight: normal;
font-size: 12px;
text-align: left;
}
td {}
</style>
</head>
<body>
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 320px;">
<tr>
<td width="31.25%"><a href="https://fertilityconsultants.ca"><img src="https://fertilityconsultants.ca/wp-content/uploads/2018/11/cfc-logo-es.jpg" alt="CFC logo"/></a></td>
<td valign="center" style="padding-left: 10px;">
<strong style="font-size: 16px;">First Last Name</strong><br/>
<em style="font-size:12px; margin-bottom:6px;">Job position</em><br/>
<strong style="font-family: helvetica, arial, sans-serif; font-size: 10px; color: #66905f;">T</strong> (555) 555.5555 <strong style="font-family: helvetica, arial, sans-serif; font-size: 10px; color: #66905f;">EXT</strong> 555<br/>
<strong style="font-family: helvetica, arial, sans-serif; font-size: 10px; color: #66905f;">C</strong> (555) 555.5555<br/>
</td>
</tr>
</table>
</div>
</body>
</html>Bressay is never going to work in Outlook or Gmail, since they don't work with web fonts like Google Fonts. I used your code and could not really tell if it was working for me or if it was Georgia, a web safe font that looks darn close. Here are some suggestions to make sure you always display a serif font for First Last Name.
In the head change your body declaration to remove the sans-serif backup:
body, table.body, td {
font-family: Bressay, Georgia, serif;
font-weight: normal;
font-size: 12px;
text-align: left;
}
body tag above, I also added table.body and td to the css. This will work with the parts where you wanted a sans-serif font instead.I added the font-family tag directly to the strong tag in the signature.:
<strong style="font-family: bressay, Georgia, serif; font-size: 16px;">First Last Name</strong>
After doing this, I got a serif font in Gmail and Android.
I tested this in Litmus and it works fine for all desktop and mobile clients.
Good luck.