Using Google Fonts in email is nothing new and is still only supported by a few email clients. However, here is a concise template that you can use that will allow for proper fallbacks and will avoid the Times New Roman issue in Outlook.
1. Include the CSS link in the head of the email. You could also include the @import URL in the head, however you only need one or the other. I prefer to use the CSS link, as it feels cleaner to me. (line 5)
2. Define your font-stack without your Google Font. This will cover you anytime the Google Font isn’t supported and will display your fallback fonts. (line 8)
3.Define your font-stack with your Google Font in the td. (line 16)
4. Include !important in the td after the font-family stack. This is necessary for Outlook because Outlook 2007, 2010 and 2013 will all default to Times New Roman. By adding the !important declaration, these versions of Outlook will ignore the font-family stack in the td entirely and default to the CSS style designated in the CSS body style in the head. (line 16)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<html> <head> <meta charset="utf-8"> <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> <style type="text/css"> body {font-family:Impact, serif} </style> </head> <body> <table> <tr> <td style="font-family:'Lobster', Impact, serif !important;">Google Web Font</td> </tr> </table> </body> </html> |