How to add custom fonts in email templates (classic editor)

read
Last updated at:

You will learn

Learn how to use third-party (custom) fonts in Klaviyo to send emails that match your brand style. Adding a custom font to an email template allows you to use your brand’s fonts in email messaging. You can use Google Fonts, Adobe Typekit, or self-hosted fonts in your emails. However, keep in mind that only certain email clients support custom fonts, and many popular clients (like Gmail and Yahoo) do not. 

Looking for no-code custom fonts? Head to our article on custom fonts in Klaviyo's new template editor. 

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. 

Custom font support and limitations

Custom fonts can help keep your marketing cohesive, aligning your email content with your ecommerce site. However, custom fonts 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 be confident you'll deliver a consistent experience for all subscribers.

Email clients that do support custom 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
  • Outlook iOS App

In order to use custom fonts, the code must be manually added to each message you send. The font will not be available in the dropdown menu within the template editor, and custom fonts are not supported in product, button, or header/link blocks.

Best practice: select a fallback font

When using a custom font, always provide a web-safe fallback font to display for those recipients using clients that don’t support custom fonts. Common web-safe fonts include Arial, Georgia, Helvetica, Times New Roman, and Verdana. Find more web-safe fonts. 

Choose a fallback font that is similar in style to the custom font you use. You should also specify “serif” or “sans-serif” as a final fallback font, in case your selected fallback font is not available. 

Add a Google Font to your template

  1. Search for your Google font here: https://fonts.google.com
  2. Find the font you’d like to use and click Select This Style
  3.  Click @importThe Google Fonts page for Roboto font, with the font's import URL highlighted
  4. Copy the import URL from within the code
  5. Log in to Klaviyo
  6. Go to Templates
  7. Choose your email template
  8. Find and edit the first text block in your email
  9. Click Source 
  10. Assign your font to headings, paragraph text, bullet points, and numbered lists by using these properties in your code snippet, making sure to replace FONT_URL with the font URL you copied in step 4 and the font name placeholders with font names
    • The full code snippet should follow this format:
      <style type="text/css">
      
@import url('FONT_URL');

        p, h1, h2, h3, h4, ol, li, ul { font-family: INSERT_FONT_NAME, INSERT_A_FALLBACK_FONT,
  sans-serif; }

      </style>
    • You only need to add this code to the first text block in your email. The subsequent text blocks will include the custom font
  11. Save the block
    Klaviyo's template editor with Roboto font installed in the Source section of the first text block

Once you've added the snippet to the source code, you’ll see the custom font applied to any text that has a default style (Normal, Heading 1, Heading 2, etc.). If the font is not being applied to a portion of your text, navigate to that block and make sure that a style has been selected from the paragraph styles menu.

Text block options in the Klaviyo editor, with the Normal paragraph style option highlighted

Add an Adobe Font to your template

You must have a subscription with Adobe to use Adobe fonts.
  1. Search for your Adobe font here: https://fonts.adobe.com/fonts.
  2. Select your font and click the code icon (</>) on the bottom left
    Adobe's Agenda font modal
  3. Choose to add your font to an existing kit or create a new one
  4. ClickSave
  5. Skip the Default Embed Code in the next window and click @import instead
  6. Copy the import URL on the following screen and take note of the font family
    1. In the example below, the font family is agenda and the URL is https://use.typekit.net/dfb2jbi.cssThe code section of Adobe's Typekit font modal
    2. Log in to Klaviyo
    3. Go to Templates
    4. Choose your email template
    5. Find and edit the first text block in your email
    6. Click Source
    7. Add HTML that
      1. Includes the font's import URL and font-family (which is case-sensitive and must exactly match the font family name font in Adobe's font information modal)
      2. Specifies which HTML elements will use that font
        <style type="text/css">
        
@import url('INSERT_FONT_URL');

  p, h1, h2, h3, h4, ol, li, ul { font-family: INSERT_FONT_NAME, INSERT_A_FALLBACK_FONT,
  sans-serif; }
        
</style>
    8. Save the block to see the new fonts in your template
    Klaviyo's template editor, with the Adobe font Agenda successfully installed in the first text block

Once you've added the snippet to the source code, you’ll see the custom font applied to any text that has a default style (Normal, Heading 1, Heading 2, etc.). If the font is not being applied to a portion of your text, navigate to that block and make sure that a style has been selected from the paragraph styles menu.

Text block options in the Klaviyo editor, with the Normal paragraph style option highlighted

Add a self-hosted custom font to your template

If you've purchased or downloaded a custom font that's not hosted by a third-party source, you can still use it in a Klaviyo template.

  1. Host the font files in a location that will be accessible to Klaviyo (for example, in your site’s assets or on a font hosting platform)
  2. 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
  3. Go to Templates in Klaviyo
  4. Choose your email template
  5. Find and edit the first text block in your email
  6. Click Source
  7. Add a custom snippet of code like the one below 
    • Here, the font is "Neutra Text"
      <style type="text/css">

      @font-face { font-family: Neutra Text;

  src: url('https://host.net/fonts/Neutra2Text-Light-Lining.eot'), /* IE9 Compat
  Modes */

  url('https://host.net/fonts/Neutra2Text-Light-Lining.woff') format('woff'), /*
  Modern Browsers */

  url('https://host.net/fonts/Neutra2Text-Light-Lining.ttf') format('truetype'),
  /* Safari, Android, iOS */

  url('https://host.net/fonts/Neutra2Text-Light-Lining.svg#webfont') format('svg');
  /* Legacy iOS */ }

  p, h1, h2, h3, h4, ol, li, ul { font-family: Neutra Text, Verdana, sans-serif;
  font-weight: 400; }

</style>
  8. Enter your customized snippet into the source code of the first text block in your template 
    Klaviyo's template editor with the custom font Neutra Text successfully installed in the first text block
  9. Save the block

Once you've added the snippet to the source code, you’ll see the custom font applied to any text that has a default style (Normal, Heading 1, Heading 2, etc.) applied. If the font is not being applied to a portion of your text, navigate to that block and make sure that a style has been selected from the paragraph styles menu.

Text block options in the Klaviyo editor, with the Normal paragraph style option highlighted

Use multiple custom fonts

If you would like to use multiple custom fonts within one template, you can import and apply them to one or more font styles using a code snippet like the one below. Make sure to only assign each style (e.g. p, h1, h2) to one font. Using more than two custom fonts can impact load time for your emails, so we do not recommend using more. 

Multiple Google Fonts

  1. Select each of the fonts you’d like to use within Google Fonts
  2. Click @import in the panel on the right and copy the URL
  3. Add this URL to the code snippet below
    1. Add in the font names where specified
    2. Adjust the styles each font should be applied to (e.g. p, h1, h2), if desired
<style type="text/css">

@import url('FONT_URL');

  p, ol, li, ul { font-family: INSERT_FONT_NAME, INSERT_A_FALLBACK_FONT, sans-serif;
  }

  h1, h2, h3, h4 { font-family: INSERT_FONT_NAME, INSERT_A_FALLBACK_FONT, sans-serif;
  }

</style>

Multiple Adobe Fonts

  1. Activate each of the fonts you’d like to use within Adobe Fonts
  2. Copy the import URL
  3. Add this URL to the code snippet below
    1. Add in the font names where specified
    2. Adjust the styles each font should be applied to, if desired. 
<style type="text/css">

@import url('FONT_URL');

  p, ol, li, ul { font-family: INSERT_FONT_NAME, INSERT_A_FALLBACK_FONT, sans-serif;
  }

  h1, h2, h3, h4 { font-family: INSERT_FONT_NAME, INSERT_A_FALLBACK_FONT, sans-serif;
  }

</style>

Multiple self-hosted fonts

To add multiple self-hosted fonts, use the code below as a template.

Additional font source URLs can be added to increase compatibility with different inboxes and browsers. Reference the section Add a Self-Hosted Custom Font to Your Template to see an example that includes multiple font sources and formats.

Supported formats include WOFF, WOFF2, TTF, EOT, and SVG. 

<style type="text/css">

 @font-face { font-family: INSERT_FONT_1_NAME;

  src: url('FONT_URL.woff') format('woff'); }

  @font-face { font-family: INSERT_FONT_2_NAME;

  src: url('FONT_URL.woff') format('woff'); }

  p, ol, li, ul { font-family: INSERT_FONT_1_NAME, INSERT_A_FALLBACK_FONT, sans-serif;
  font-weight: 400; }

  h1, h2, h3, h4 { font-family: INSERT_FONT_2_NAME, INSERT_A_FALLBACK_FONT, sans-serif;
  font-weight: 400; }

</style>

Additional resources

x
Was this article helpful?
866 out of 1666 found this helpful