Client Name
Last updated on
Nov 16, 2022
- Adobe Fonts User Guide
- Introduction
- Font licensing
- Font licensing
- Manage your account
- Licensing for Creative Cloud for enterprise customers
- Adding font licenses to your account
- Removing fonts from the subscription library
- Adobe Fonts not available to Adobe IDs registered in China
- Why aren't these fonts included in my Creative Cloud subscription?
- Morisawa font removal September 2021
- Getting and using fonts
- Using Adobe Fonts in Creative Cloud apps
- Manage your fonts
- Resolve missing fonts in desktop applications
- Using fonts in InDesign
- Fonts and typography
- Using web fonts in HTML5 Canvas documents
- Using fonts in InCopy
- Using web fonts in Muse
- Packaging font files
- Troubleshooting guide: Adding fonts
- Added fonts aren't showing to font menu
- "Unable to add one or more fonts" or "A font with the same name is already installed"
- What happens when a font I'm using is updated by the foundry?
- Web design and development
- Add fonts to your website
- Troubleshooting guide: Adding fonts to a website
- Using web fonts in HTML email or newsletters
- Using web fonts with Accelerated Mobile Pages (AMP)
- CSS selectors
- Customize web font performance with font-display settings
- Embed codes
- Dynamic subsetting & web font serving
- Font events
- Why are my web fonts from use.typekit.net?
- Site can't connect to use.typekit.net
- Using web fonts with CodePen
- Browser and OS support
- Domains
- Using web fonts when developing locally
- Content security policy
- Printing web fonts
- Language support and OpenType features
- Font technology
The @import CSS embed code can be used to include custom web fonts in HTML email or newsletters.
Note:
JavaScript font loading is used for Adobe's dynamic subsetting, which is required for East Asian web font serving. Since there isn't a CSS embed code option, these web fonts–including those with Chinese, Japanese, and Korean language support–cannot be used in HTML email.
Choose fonts to use
Follow the web font tutorial to choose the fonts you want to use and create your project.
Add the embed code
To find the embed code for your project, visit the Web Projects page. Locate the project name, then click on the “@import link” option.
Add the <style> tags with the @import embed code to the <head> of the email, along with the font family names.
The font family name to use in the CSS to style your text is listed in the web project as well; read more about using fonts in CSS.
Note:
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.
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.
Here is a short list of popular email clients and their compatibility with web fonts.
|
|
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 2011 (OS X 10.10+) |
Yes |
|
Outlook 2016 (OS X 10.10+ and Windows 10) |
Yes |
Deleting a project or canceling your subscription
If you delete the project that you are using in an email campaign or cancel the subscription that is hosting it, the fonts will no longer be available to any sent emails. The fallback fonts you specified or the email client’s default fonts will be used in their place.
More like this
Adobe MAX
The Creativity Conference
Oct 14–16 Miami Beach and online
Adobe MAX
The Creativity Conference
Oct 14–16 Miami Beach and online