You will learn
Learn how to add new fonts to the Klaviyo email template editor so that your emails match your brand style. In this article, you’ll also learn about the tradeoffs when using custom fonts, and how to choose a font supported by the widest range of inboxes.
Looking to add custom fonts in Klaviyo's classic template editor? Head to How to add custom fonts in email templates (classic editor).
You can use Google Fonts, Adobe Typekit, or self-hosted fonts in your emails. However, keep in mind that only certain email inboxes support custom fonts, and many popular clients (like Gmail and Yahoo) do not.
This article will walk you through how to use custom fonts in your email templates, not your signup forms. For information on adding custom fonts to your signup forms, head to our article on custom fonts in signup forms.
Any font that isn’t provided by default in the Klaviyo editor
A custom font that must be loaded from an outside source
A font that is stored locally on most devices, and therefore doesn’t need to be loaded from an outside source in order to display
A web-safe font that is used in inboxes that don’t support your custom font
Custom font support and limitations
Custom fonts can help keep your marketing cohesive, aligning your email content with your ecommerce site. However, web fonts (i.e., fonts loaded from an outside source, rather than available from the device’s storage) may not render as expected on all devices or email clients. Klaviyo’s default fonts are pre-installed on the vast majority of computers and devices, so you can deliver a consistent experience for all subscribers.
Email clients that do support web fonts include:
- Apple Mail
- iOS Mail (the default email browser on iOS)
- Google Android (except Android 2.3, which doesn’t support the @import method used by Google and Adobe fonts)
- Samsung Mail (Android 8.0)
- Outlook for Mac
Custom fonts in Gmail and other unsupported inboxes
Your recipients who use Gmail (or other inboxes that don’t support custom fonts) may see your fallback font (which you can set in your email template), rather than the custom font you choose. To avoid this, consider selecting a web-safe custom font, which is available on most devices regardless of their support for web fonts.
Find web-safe fonts here, along with a breakdown of support by device.
Add a new custom font in the email template editor
This process is available in Klaviyo’s new template editor, and is not supported in the classic template editor. Note that the process of adding a custom font to a classic template (i.e., adding a snippet of code to add a font) is not supported in the new template editor.
If you've previously implemented custom fonts using a code snippet, remove that code before applying a new custom font to your template.
To add a custom font to an email template in Klaviyo’s new template editor:
- Open a text block in your template
- In the font dropdown, click Add Font
- In the modal that appears, choose Google Font, Adobe Font, or Upload Font, depending on your font’s source
- Follow the instructions in the sections below for your font type (Google, Adobe, or uploaded)
Once you’ve added a font to your email templates, it will be available for all other templates as well as your signup forms.
Add additional font variants to an existing custom font
You can always edit or delete your custom fonts under Brand Library > Fonts. To select additional variants for a custom font you've already added:
- Navigate to the Brand Library tab
- Click Fonts
- Find the font you'd like to edit beneath Your Fonts
- In that font's card, click the three dots in the top right corner
- Click Edit in the menu that appears
- Click # font variants selected to expand the list of font variants
- Select any additional variants you'd like to add
- Click Update Font
To add a Google Font, simply type the name of the Google font you’d like to use. Choose a fallback font; then, click Add Font.
Adobe fonts are only available to users who have an active Adobe Fonts subscription. To add an Adobe font, click Adobe Font and paste in your CSS Address. The address should follow this format: https://use.typekit.com/123ABC
Choose a fallback font, then click Add Font.
Imported fonts, sometimes called self-hosted fonts, are recommended only for senders who have access to a developer. To use an imported font, you’ll first need to host the font, either on your servers or using a font-hosting service. Make sure to enable Cross-Origin Resource Sharing (CORS) by setting the Access-Control-Allow-Origin header to *, so the font can be accessed by your recipients’ inboxes. Learn more about CORS.
Once you’ve successfully hosted the font, click Import Font in the Add Font modal and paste your hosting URL into the Source address field. Add in your font’s name, weight, and style to the appropriate fields.
Finally, choose a fallback font and click Add Font.
About fallback fonts
With all types of custom fonts, you’ll need to select a fallback font. This font will appear for those recipients using clients that don’t support your custom font. Choose a font from the list of available options that is similar in style to your custom font.
For example, if you use Poppins (a Google font) as your custom font and Arial as your fallback font, email recipients will see the following fonts:
- Recipients who open your email in a browser that supports web fonts (e.g., Apple Mail, iOS Mail) will see Poppins
- Recipients who open your email in a browser that does not support web fonts (e.g., Gmail) will see Arial
Apply a custom font
Once you’ve set up a custom font, you can apply it to any text in your template, including:
- In your main template styles
- In any block’s styles
- To a specific piece of text in a text block
- To button blocks, product blocks, and any other block types containing text
In a text block, select the text you’d like to apply the font to; then, select the custom font from the dropdown.
For all other block types, or for block and template styles, select the font from the appropriate dropdown.
Preview your custom fonts
Once your template is ready, send yourself a preview email by clicking Preview and Test > Send Test. Try opening the message on a variety of devices to see how it will appear to different recipients. You can also use a tool like Email on Acid to preview across a wider variety of devices.