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 has to be at the beginning of the <style> tag with any other @import statements or the fonts will not load. Only a @charset entry is allowed to be listed before the @import lines.
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.
If you're posting the email or newsletter content online (either permanently or during development), that domain name needs to be listed on the kit as well in order for the fonts to load.
A pageview is counted when the Typekit stylesheets are loaded by the email client. If the client loads the stylesheet again when the email is reopened, another pageview is counted. In the case where the email client does not support web fonts and the stylesheet is not loaded, no pageview will be recorded.
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.
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.
|Android Mail App (native, no GMail)||Yes|
|Outlook.com for web||Yes|
|Outlook 2011 (OS X 10.10+)||Yes|
|Outlook 2016 (OS X 10.10+ and Windows 10)||Yes|