Web safe email fonts are typefaces already installed on both Windows and macOS, such as Arial, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman and Courier New. Because Gmail and Yahoo Mail ignore custom web fonts, write every font-family as a stack that ends in one of these and a generic family.
| Font | Type | Good for |
|---|---|---|
| Arial | Sans-serif | Body text, the safest default |
| Verdana | Sans-serif | Small text; wide letters stay legible |
| Tahoma | Sans-serif | Compact labels and footers |
| Trebuchet MS | Sans-serif | Headings with a little character |
| Georgia | Serif | Editorial newsletters and long reads |
| Times New Roman | Serif | Formal notices |
| Courier New | Monospace | Codes, order numbers, receipts |
Updated
An email does not get to download fonts the way a web page does in every inbox. What the reader sees depends on their mail app and the fonts on their device, so the trick is a font stack that degrades gracefully. Pick a stack below to preview it with your own text and copy the CSS.
Choose a stack and type your own text. The preview uses the fonts installed on this device, the same way a mail app picks from the stack.
Your order is on its way. Track it any time from your account.
font-family: Arial, Helvetica, sans-serif;Support for @font-face as recorded by caniemail.com, last updated December 19, 2023. Check the live page before relying on it, because mail apps change.
| Email client | @font-face |
|---|---|
| Apple Mail (macOS 12.2 and later, iOS 10.3 and later) | Supported |
| Thunderbird | Supported |
| ProtonMail | Supported |
| Outlook for Windows (2003 to 2019) | Rule accepted, remote fonts ignored |
| Outlook.com | Partial |
| Gmail | Not supported |
| Yahoo Mail | Not supported |
| AOL | Not supported |
The stack sits in the inline style of the cell itself, so it does not depend on a style block in the head.
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; color: #1f2937;">
Your order is on its way. Track it any time from your account.
</td>
</tr>
</table>Apps that support @font-face show the brand font; the rest fall through to Trebuchet MS, Arial and finally any sans-serif.
<style>
@font-face {
font-family: "Brand Sans";
src: url("https://cdn.example.com/brand-sans.woff2") format("woff2");
}
</style>
<!-- ... -->
<td style="font-family: 'Brand Sans', 'Trebuchet MS', Arial, sans-serif; font-size: 16px;">
Spring menu is live.
</td>font-family is a priority list. The mail app walks it from left to right and uses the first font it can find, character by character, so a stack covers every reader as long as it ends in a font they all have.
MDN advises always closing the list with a generic family such as sans-serif. If nothing else matches, the app still picks a sensible typeface instead of its own default serif.
You can declare a web font in a style block for the apps that support it, then list web safe fonts after it. Readers in Apple Mail see the brand font and Gmail readers see the fallback.
Keep important text, such as prices and buttons, as live text rather than images of text. It stays readable with images turned off and works with screen readers.
Fonts present on both major desktop systems: Arial, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman and Courier New all appear in Microsoft's Windows 11 font list and Apple's macOS Sequoia font list.
No. caniemail.com lists @font-face as unsupported in Gmail, which uses its own fonts instead. Your stack's fallback is what Gmail readers see, so choose it with care.
According to caniemail.com, Apple Mail on macOS and iOS, Thunderbird and ProtonMail support @font-face. Gmail, Yahoo Mail and AOL do not, and Outlook.com support is listed as partial.
Classic Outlook for Windows accepts the @font-face rule but ignores remote fonts, and caniemail.com notes that text can then fall back to Times New Roman. A web safe font earlier in the stack avoids that.
There is no official rule. Many designers use 14 to 16 pixels for body text and larger for headings; test on a phone, where small text is hardest to read.
Related: Best fonts for websites, HTML email templates, HTML email template builder, Font pairing tool, Web font loading.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.