The CSS embed code can be used to include fonts from Typekit in HTML email or newsletters.  Add the <style> tags with the @import CSS embed code to the <head> of the email, along with the Typekit font family names.

The @import embed code used in HTML email

There aren't any required domains to use CSS kits in HTML email. You will need to specify at least one domain when creating the kit, though: the localhost domain is a safe choice.

Caution:

Because using a kit in an HTML email or newsletter does not require a domain name, there is the possibility for someone to add your kit ID to their own email campaign and use the fonts. Pageviews from those emails would also be counted towards the limit on the Typekit subscription that owns the original kit. 

Email client support for web fonts

Some email clients do not support HTML email or web fonts in email, which will affect what your recipients see. Be sure to specify fallback fonts in your email and test your email before sending it, so that it performs well in all clients whether or not the fonts from Typekit are available.

Here is a short list of popular email clients and their compatibility with web fonts.

Client Name Compatible?
AOL Mail Yes
Android Mail App (native, no GMail) Yes
Apple Mail Yes
GMail No
Google Inbox No
iOS Mail Yes
Outlook 2000 No
Outlook.com for web Yes
Outlook 2011 (OS X 10.10+) Yes
Outlook 2016 (OS X 10.10+ and Windows 10) Yes

Deleting a kit or canceling your account

If you delete a kit that you are using in an email campaign or cancel the subscription which is hosting it, the fonts from Typekit will no longer be available to any sent emails which use that kit. The fallback fonts you specified or the email client’s default fonts will be used in their place.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy