Adding a font from Google or Typekit is a way to add some additional flair to your HTML email, but beware – a number of devices and applications do not support displaying different fonts. Always have a list of fallback fonts declared.
- @import of fonts best way to use Google fonts or typecast fonts.
- Not totally supported by all browsers especially Google Mail, so use a fallback.
- If you put Google fonts inline, Outlook will fail the entire line and show it as Times New Roman.
Best Method:
- Put fallback stack inline (
font-family: Tahoma, sans-serif;) on the td or element. - Use class name with external font definition and apply that class name to the element.
- The class name overrides the inline style in the applications that recognize media queries.
Sample Code:
Style:
HTML:
