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 Color Theory
The application of colour theory principles to email design, including brand palette selection, WCAG contrast requirements, dark mode adaptation, and colour psychology for CTAs.
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 Design Accessibility
Practice of designing email content that can be perceived, understood, and interacted with by people of all abilities, including those using assistive technologies.
Font Stack
A font stack is a prioritised list of fonts specified in CSS that tells an email client which typefaces to use, providing fallbacks when the preferred font is not available on the recipient's device.
Email Footer Design
Best practices and legal requirements for email footers, including mandatory elements, accessibility considerations, mobile layout, and dark mode compatibility.
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 `