Body | While the fonts you choose should display as expected in the email builder and the web version of your email, they will display differently depending on the device and email client your recipients use.
This is because not all devices have the same fonts, and not all email clients support web fonts.
There are two types of fonts to consider when you build an email: system fonts and web fonts.
System fonts
System fonts are stored on your recipient's hard drive, and come with operating systems like macOS, Windows, iOS and Android.
As a general rule, older versions of operating systems don't have as many fonts, and not every device has the same fonts available. To compensate for this, we include a series of fallbacks — backup fonts that will display if a device can't load the preferred font. While we try to choose an alternative font as close as possible to the one you see while building your email, you should expect differences depending on what device an email is opened on.
Ultimately if the system viewing the email doesn't have the originally specified font or any of the fallbacks, the system's default serif, sans serif or monospaced font is loaded.
The system fonts available for selection in the email builder and their fallbacks are listed below.
Font | Fallback order | Expected font | Arial | sans‑serif | Windows: Arial MacOS: Arial Android: Roboto iPhone: Arial | Avenir | sans‑serif | Windows: Arial MacOS: Avenir Android: Roboto iPhone: Avenir | Calibri | Carlito, PT Sans, Trebuchet MS, sans‑serif | Windows: Calibri MacOS: PT Sans Android: Roboto iPhone: Trebuchet MS | Century Gothic | Heiti SC, STHeiti, Avenir, Trebuchet MS, Arial, sans‑serif | Windows: Century Gothic MacOS: Avenir Android: Roboto iPhone: Heiti SC | Courier New | Courier, monospace | Windows: Courier New MacOS: Courier New Android: Droid Sans Mono iPhone: Courier New | Futura | Century Gothic, Corbel, sans‑serif | Windows: Century Gothic MacOS: Futura Android: Roboto iPhone: Futura | Garamond | Adobe Garamond Pro, Palatino, Times New Roman, serif | Windows: Times New Roman MacOS: Times New Roman Android: Droid Serif iPhone: Palatino | Georgia | serif | Windows: Georgia MacOS: Georgia Android: Droid Serif iPhone: Georgia | Gill Sans | Gill Sans MT, Trebuchet MS, sans‑serif | Windows: Trebuchet MS MacOS: Gill Sans Android: Roboto iPhone: Gill Sans | Helvetica | sans‑serif | Windows: Arial MacOS: Helvetica Android: Roboto iPhone: Helvetica | Hoefler Text | Constantia, Georgia, serif | Windows: Constantia MacOS: Hoefler Text Android: Droid Serif iPhone: Hoefler Text | Lucida Grande | Lucida Sans, Lucida Sans Unicode, Verdana, sans‑serif | Windows: Lucida Sans Unicode MacOS: Lucida Grande Android: Roboto iPhone: Verdana | Palatino | Palatino Linotype, Book Antiqua, Georgia, serif | Windows: Palatino Linotype MacOS: Palatino Android: Droid Serif iPhone: Palatino | PT Sans | Trebuchet MS, Calibri, sans‑serif | Windows: Trebuchet MS MacOS: PT Sans Android: Roboto iPhone: Trebuchet MS | PT Serif | Lucida Bright, Palatino, Palatino Linotype, Georgia, serif | Windows: Palatino Linotype MacOS: PT Serif Android: Droid Serif iPhone: Palatino | Times | Times, Times New Roman, serif | Windows: Times New Roman MacOS: Times Android: Droid Serif iPhone: Times New Roman | Trebuchet MS | Lucida Grande, Lucida Sans Unicode, sans‑serif | Windows: Trebuchet MS MacOS: Trebuchet MS Android: Roboto iPhone: Trebuchet MS | Ubuntu | PT Sans, Tahoma, sans‑serif | Windows: Tahoma MacOS: PT Sans Android: Roboto iPhone: Helvetica | Verdana | Verdana, sans‑serif | Windows: Verdana MacOS: Verdana Android: Roboto iPhone: Verdana |
Web fonts
Web fonts are loaded from the internet instead of a recipient's device, so should display similarly everywhere — so long as the recipient's email client supports them. Where a recipient's email client doesn't support web fonts, it will fall back to available system fonts.
Additionally, if a recipient's device has a font with the same name as name as a web font, the device font will be displayed instead of the web font, and may look different.
The major email clients that support web fonts are:
- Apple Mail
- iOS Mail
- Android's native email app (not Gmail)
- Outlook on Android and iOS
- Thunderbird
- Outlook for Mac
The major email clients that don't support web fonts are:
- Gmail
- Yahoo Mail
- Outlook.com
- Gmail mobile apps
- Most Outlook versions on Windows
The web fonts available for selection in the email builder, and the fallbacks provided if they don't load, are listed below.
Font | Fallback order | Expected system font fallback if web fonts not supported | Arvo | Museo Slab, Rockwell, Verdana, serif | Windows: Verdana MacOS: Times New Roman Android: Droid Serif iPhone: Times New Roman | Bitter | Lucida Bright, PT Serif, Georgia, serif | Windows: Times New Roman MacOS: PT Serif Android: Droid Serif iPhone: Georgia | Cabin | Gill Sans MT, Gill Sans, Trebuchet MS, sans‑serif | Windows: Trebuchet MS MacOS: Gill Sans Android: Roboto iPhone: Gill Sans | Crete Round | PT Serif, Constantia, Georgia, serif | Windows: Constantia MacOS: PT Serif Android: Droid Serif iPhone: Georgia | Droid Sans | Apple SD Gothic Neo, Segoe UI, DejaVu Sans, Trebuchet MS, sans‑serif | Windows: Segoe UI MacOS: Apple SD Gothic Neo Android: Droid Sans iPhone: Apple SD Gothic Neo | Hind | Corbel, Segoe UI, Avenir, sans‑serif | Windows: Segoe UI MacOS: Avenir Android: Roboto iPhone: Avenir | Karla | Calibri, Geneva, sans‑serif | Windows: Calibri MacOS: Geneva Android: Roboto iPhone: Helvetica | Lato | Avenir, Adobe Heiti Std, Segoe UI, Trebuchet MS, sans‑serif | Windows: Segoe UI MacOS: Avenir Android: Roboto iPhone: Avenir | Lora | Palatino, Book Antiqua, Georgia, serif | Windows: Book Antiqua MacOS: Palatino Android: Droid Serif iPhone: Palatino | Merriweather | DejaVu Serif, Georgia, serif | Windows: Times New Roman MacOS: Georgia Android: Droid Serif iPhone: Georgia | Montserrat | DejaVu Sans, Verdana, sans‑serif | Windows: Verdana MacOS: Verdana Android: Roboto iPhone: Verdana | Open Sans | Segoe UI, Apple SD Gothic Neo, Lucida Grande, Lucida Sans Unicode, sans‑serif | Windows: Segoe UI MacOS: Apple SD Gothic Neo Android: Roboto iPhone: Apple SD Gothic Neo | Oswald | Avenir Next Condensed, Arial Narrow, MS UI Gothic, sans‑serif | Windows: MS UI Gothic MacOS: Helvetica Android: Roboto iPhone: Helvetica | Playfair Display | Didot, Bodoni MT, Times New Roman, serif | Windows: Bodoni MT MacOS: Didot Android: Droid Serif iPhone: Times New roman | Raleway | Trebuchet MS, Avenir, Segoe UI, sans‑serif | Windows: Trebuchet MS MacOS: Trebuchet MS Android: Roboto iPhone: Trebuchet MS | Roboto | -apple-system, BlinkMacSystemFont, Tahoma, sans‑serif | Windows: Tahoma MacOS: San Francisco Android: Roboto iPhone: Helvetica | Roboto Condensed | Arial Narrow, Avenir Next Condensed, Roboto, sans‑serif | Windows: Arial MacOS: Helvetica Android: Roboto iPhone: Helvetica | Source Sans Pro | Apple SD Gothic Neo, PT Sans, Trebuchet MS, sans‑serif | Windows: Trebuchet MS MacOS: Apple SD Gothic Neo Android: Roboto iPhone: Apple SD Gothic Neo |
|
|
---|