You will learn
Learn about the opportunities and limitations of using fonts online, and how to send emails that align with your brand.
Learn how to use custom fonts.
How fonts work
Fonts are representations of text, and can be used in print or online media. You’re certainly familiar with some of the more common fonts, like Arial or Times New Roman, but there are thousands of other fonts you can use to communicate and represent your brand.
With online media (like websites or emails), your font options are nearly limitless. However, when you share your creation with someone else, it may not look exactly the same, because not all devices have access to the same fonts.
There are two main ways a device can access and use a font: system fonts (i.e., fonts stored on the device you’re using) and web fonts (i.e., fonts loaded from an external server)
About system fontsAbout system fonts
Computers and phones come pre-loaded with a variety of fonts. There are some commonly installed fonts (most devices come with Georgia and Verdana, for example), but devices can vary widely in what they include by default. Fonts that are used by most devices are called “web-safe” fonts.
About web fontsAbout web fonts
Different from web-safe fonts, web fonts are loaded from an external server at the same time as the content you’re viewing. Custom fonts are generally web fonts. If you use a web font, you’ll want to set a web-safe fallback font as well, in case a particular device is unable to load your web font.
About fallback fontsAbout fallback fonts
When you view anything online, whether it’s a webpage or an email, there’s CSS (code used to style content online) behind the scenes that tells your device which font to display. If your device can’t access the font, it will check the CSS for a “fallback font” (a font, or fonts, selected by the person who created the website or email message, to be used in case the preferred font wasn’t available). Fallback fonts should be web-safe fonts that most devices can use, and they give you more control over how your message appears when someone views it on a device that doesn’t support custom/web fonts.
If there’s no fallback font available, or if the fallback font isn’t supported by the device being used, then the device will use a default font, like Arial or Times New Roman. Default fonts vary widely across devices and apps.
How fonts work in emailHow fonts work in email
Some email clients support web fonts; others don’t. When someone opens your email in an inbox or device that does not support web fonts, they will see a default font used instead. You can control which system fonts are used as backups by setting a fallback font.
If someone opens your email on a device that supports web fonts, it will load the font from the URL provided in your email’s CSS. If the device is able to access the font, it will display it; otherwise, it’ll move on to the fallback fonts.
The following email clients support web (custom) fonts:
- Apple Mail
- iOS Mail (the default email browser on iOS)
- Google Android (except Android 2.3, which doesn’t support the
@importmethod used by Google and Adobe fonts) - Samsung Mail (Android 8.0)
- Outlook for Mac
Note that Gmail, one of the biggest email clients, does not generally support web fonts. However, there is 1 specific exceptions: Gmail does support Roboto.
Optimizing your emailsOptimizing your emails
The best way to ensure your email looks consistent across devices is to use a web-safe font. Klaviyo’s default fonts are generally web-safe. Find the fonts Klaviyo provides in:
- Content > Images & Brand > Brand Assets
- The Styles tab of your emails
- The Styles section of any email blocks containing text
- The Styles tab of the signup form editor
Three of the fonts Klaviyo provides are not supported by some devices: Century Gothic, Tahoma, and Apple Black. These fonts do not come preinstalled on iOS devices (e.g., iPhones), so if you use these fonts, they may appear as the inbox’s default font when viewed on an iOS device.
Tips for using custom fonts
If you prefer to use a custom font, get creative to ensure your emails look well-designed across devices using the tips below.
Use fallback fonts
Select a web-safe fallback font that matches your custom font as closely as possible. You can select a fallback font from Klaviyo’s default fonts when configuring the custom font.
Use text in images
While an all-image email can hurt your deliverability, you can strategically use a combination of text in images and text in text blocks to create an email that aligns with your brand. Choose a custom, branded font for your headings and calls to action (CTAs), and pair it with a web-safe font to use for your body text.
Use images containing your branded font for select text, and make sure to add alt text when you add the images to your email. Then, apply the web-safe font to the rest of the text in your email. The result is a branded email that matches your site, while also being accessible for your subscribers’ inboxes.
Test thoroughly
Regardless of which methods you choose, test your emails thoroughly, especially when using a new design. Send the email to yourself on multiple devices to ensure you’re happy with how it appears on each. You can also make use of email testing programs like Litmus or Email on Acid to test using a broader range of devices.
Additional resources