Definition
Email fonts operate under tighter constraints than web fonts. Most email clients only render fonts that are installed on the user's operating system. Web-safe fonts like Arial, Helvetica, Georgia, Times New Roman, Verdana, and Courier New are reliable across Windows, macOS, iOS, and Android. Custom fonts can be loaded via @import or @font-face but only work in a subset of clients — primarily Apple Mail, iOS, Samsung Email, and Thunderbird. Gmail and Outlook ignore custom font declarations and fall back to the next font in the stack.
A font stack is a prioritized list of fonts that the client attempts in order. A typical stack for a custom brand font looks like: 'CustomFont', Arial, Helvetica, sans-serif. The custom font loads in supporting clients; Arial serves as the fallback for everyone else. Font-size recommendations differ by client: 14px minimum for body copy on desktop, 16px for mobile to prevent iOS Safari from zooming in on small text.
Best Practices
Define font-family as an inline style on every text element. Gmail strips <style> blocks, so the fallback stack must be present on the element itself. Use a comma-separated list with three or more entries: your custom font, a generic web-safe font, and the CSS generic family (serif, sans-serif, monospace).
Use a minimum font size of 14px for body text in desktop campaigns and 16px for mobile-responsive designs. iOS Safari and WebKit-based clients zoom into form inputs and text below 16px, which can break the user experience. Set -webkit-text-size-adjust: 100%; in the <style> block to prevent automatic text resizing in mobile clients.
Load custom fonts via @import in a <style> block for progressive enhancement. Clients that support it (Apple Mail, iOS Mail, Samsung Email) will download and render the custom typeface. Clients that do not (Gmail, Outlook, Yahoo) silently use the fallback stack. Do not use @font-face with base64-encoded font files — the bloated HTML triggers Gmail's 102KB truncation limit and is stripped by Outlook.
Avoid using multiple font families in a single email. Stick to one typeface (plus its fallback) for body text and at most one additional typeface for headings. Every custom font adds an HTTP request and increases the risk of rendering delays. If you use a brand font, load only Regular and Bold weights, not the full family.
Related Glossary Terms
Email Animation
The use of motion in email through animated GIFs, CSS animations, and video embeds with fallback strategies.
Email CTA
The call-to-action element in an email that drives the primary conversion, designed through button copy, placement, color, and urgency tactics.
Email Footer
An email footer is the bottom section of an email that contains legal requirements, unsubscribe mechanisms, and company information.
Email Mobile
Design and optimization strategies for email viewed on smartphones and tablets, where over 60 percent of all email opens occur.
Email Signature
The branded block of contact information and legal disclaimers appended to the end of an email, used in both transactional and marketing messages.
Email Template Builder
Email template builders range from drag-and-drop editors to coded frameworks like MJML, requiring compatibility testing across 100+ email client and device combinations.
Frequently Asked Questions
Google Fonts load via `` or `@import` and work in Apple Mail, iOS Mail, and Samsung Email. They do not work in Gmail, Outlook, Yahoo, or AOL. Use them as progressive enhancement — the email must be readable with the fallback font alone.
Arial. It is installed on every major OS, renders consistently across clients, and is available in Regular, Bold, Italic, and Bold-Italic weights. For a serif alternative, Georgia is similarly universal.
Use a `