Use a Google Font in mails with email-templates for NodeJS
I using NodeJS, with nodemailer, email-templates and ejs to send an invitation to my wedding guests.
I've managed most issues, but I can't seem to manage a custom font and there is a lot all over the web about it...
I think that this one is the most elaborate article that I've seen :
So I've added this in the head tag :
<link href='https://fonts.googleapis.com/css?family=Tillana' rel='stylesheet' type='text/css'>
but this still doesn't display in the correct font in gmail, nor outlook (haven't tested yahoo and others)...
<td align="center" valign="top" style="padding: 0; font-family: Tillana, Open Sans, Helvetica, Arial, sans-serif; color: #999999;">
<p style="font-size: 14px; line-height: 20px;">
Some text hopefully in Tillana
</p>
</td>
I've seen in email-templates documentation that you can use an image rendering of the font with custom-fonts-in-emails, but it seems to be a bit of an overkill...
Any suggestions on how to proceed to cover most cases ?
Answer
Google Fonts Do Not Work With Gmail Or Outlook
Webfonts do not work in all email clients. They do not work with Gmail, Yahoo, Android clients and spotty support for Outlook 2007-2016. I know this sounds ridiculous, since Google has Google Fonts, but the current reality is that Gmail does not support Google Fonts.
You need to settle on a fallback font which is not Tillana or Open Sans, which is also a Google Font. In your case, the backup font for Gmail will be Arial.
Fonts supported by Gmail
These links will give you a better understanding of web fonts and how to use them in email.
- https://www.campaignmonitor.com/resources/guides/web-fonts-in-email/
- https://www.campaignmonitor.com/css/text-fonts/font-face/
- https://www.cssfontstack.com
- https://litmus.com/blog/the-ultimate-guide-to-web-fonts
Outlook Custom Fonts
Microsoft Outlook is frustrating. Outlook 2007-2016 will work sometimes with Google Fonts. It has a problem with web-safe fonts as well. If the font has a space in the name, it will revert to it's default font, Times-New Roman, which is frustrating because that font has a space in the name!
To make sure Outlook does not default to Times, add this just below your <style></style> block:
<!--[if (gte mso 9)|(IE)]><style type="text/css">
body, table, td, a, p {font-family: Arial, sans-serif !important; font-size: 12px; font-weight: 300;}
</style><![endif]-->
Add more html elements as needed to the list of body, table, td, etc. You can customize as you would with any other style sheet. Outlook should use your style sheet, but if it doesn't this usually forces it to work.
Good luck.