What are web-safe fonts?
Web-safe fonts are installed on nearly all devices and supported by the vast majority of email providers. When a subscriber views your email, their browser pulls the font from the device's local directory, as the font already exists on their device without any additional steps required to download it. From here, you can assume that the font is supported across the subscriber’s devices, mailbox providers, and operating systems.
Why should I use a web-safe font?
If your email contains a font that’s not installed on a subscriber’s device or supported by the mailbox provider (e.g., Brandon Grotesque), the font is substituted with an available font (e.g., Helvetica). Using web-safe fonts gives you more control and accuracy when it comes to your subscribers’ experience.
Which fonts are web-safe?
Attentive currently offers the following web-safe fonts: Arial, Courier New, Georgia, Helvetica, Lucinda Sans, Tahoma, Times New Roman, and Trebuchet MS.
What are web fonts?
Unlike web-safe fonts, web fonts aren’t available on all devices, and they aren’t guaranteed to be supported by inbox providers. If you choose to use a web font, you run the risk that the email could appear different to the subscriber since their device or mailbox provider doesn’t support it. Because of this, we highly recommend using web-safe fonts even though the Attentive email builder supports web fonts.
However, if most of your subscriber list views emails on specific devices or they use the same providers, you can use supported web fonts to further customize and brand your emails. Currently, Attentive provides a selection of commonly supported web fonts. If one of these web fonts is unavailable to a user, they'll see a substituted web-safe font instead.
What web fonts does Attentive offer?
Attentive currently offers the following web fonts: Barlow, Bitter, Josefin Sans, Lato, Meriweather, Open Sans, Oswald, Playfair Display, Poppins, Raleway, Roboto, Roboto Mono, Source Sans Pro, Ubuntu, and Work Sans.
When using these fonts, make sure to test the email outcome on various providers, operating systems, and devices. This will give you the best sense of how the design will perform for all your subscribers.
Which mailbox providers support web fonts?
Below is a list of mailbox providers that currently support web fonts:
Email client | Web font support |
Apple Mail | ✅ Yes |
Outlook 2007–2016 | ❌ No |
Outlook 2019 | ❌ No |
Outlook for Mac | ✅ Yes |
Outlook Office 365 | ❌ No |
Gmail app | ❌ No |
iOS | ✅ Yes |
Outlook app | ❌ No |
Samsung Mail | ❌ No |
AOL Mail | ❌ No |
Gmail | ❌ No |
Office 365 | ❌ No |
Outlook.com | ❌ No |
Yahoo! Mail | ❌ No |
How do I preview the font’s appearance?
When designing your email, you can click the Preview button at the top-right corner of the editor to view the overall appearance.
The preview page displays a mockup of the email you’re designing. However, for the most accurate representation, send yourself a test email. You should receive the email, however it might go to your spam folder, so make sure to check that folder as well.
We recommend sending to email addresses or accounts with different email providers and operating systems. This helps gauge the potential font variations, allowing you to assess whether or not the fonts work for your subscriber list.
When should I use images instead of text?
Companies often turn emails into images to retain brand styles and custom fonts. While this is an easy way to control what your subscriber sees, it can also limit accessibility to the email. Screen readers may not be able to recognize text embedded in images, which may create a barrier for subscribers with visual impairments. Additionally, based on the mailbox and the subscriber’s device settings, it’s possible that the image won’t display.
As a result, we recommend separating your text from your images in emails. This provides a direct source for screen readers to gather data and also guarantees the text will appear in an email regardless of the mailbox provider.
Learn more about Attentive Email
If you're interested in learning more about Attentive Email, please submit your information here.