How to host a custom font on your site

You will learn

Learn how to host a custom font, meaning a font that is not hosted by Google or Adobe, on your ecommerce site and import it for use in your Klaviyo sign-up forms. If you want to use an imported font in your sign-up form, there are 2 options:

1. Use the public font hosted on your website.
2. Host your own font publicly and use the URL to import your font into your sign-up forms.

Before importing a font, make sure its WOFF, WOFF2, TTF, or EOT file has a publicly accessible HTTPS URL. The font host must allow cross-origin resource sharing (CORS) so Klaviyo and your visitors’ browsers can load the file. If Klaviyo reports that a font file could not be accessed, check the URL and the host’s CORS settings.

Using your website’s font

Use the public URL of a font file on your site to import it in Klaviyo. The steps below use Chrome DevTools to find the URL.

1. Head to your site.
2. Right-click the page and select Inspect.
3. Open Network and select the Font filter.
4. Refresh the page to list the font files loaded by that page.
5. Under Name, select the font file you want to import. If the filename is a string of numbers and letters, select Preview to help identify the font.
6. Right-click the font request and select Copy > Copy URL. Use this URL in the Import your font into Klaviyo section below.

Uploading a self-hosted font

To begin, if the font isn’t already publicly hosted online, download the font that you want to use to your computer. Note that the file must be in WOFF, WOFF2, TTF, or EOT format to use in Klaviyo. Also, be cautious downloading font files from the internet, as they can contain malware. From there:

1. Upload the font file to a public location on your ecommerce site, following your platform’s instructions below.
2. Save the upload and copy the file’s public HTTPS URL.

For more information on adding a file to your site, see your ecommerce platform’s help center:

• Shopify
• BigCommerce

Import your font into Klaviyo

Once you have the font file’s URL, follow these steps to add it to your Klaviyo font library.

1. In Klaviyo, navigate to Content > Media & brand > Brand. Open Fonts, or, if your page has a Style tab, open it to find the Fonts section.
2. Select Add font and choose Custom font.
3. Enter a Custom font name. Under Source URL, paste the font file’s URL.
4. Select the Font weight and Font style that match the file. For example, use Normal 400 and Normal for a regular, non-italic font file. If the font is already used on your site, match its existing weight and style to avoid changing how it displays.
5. Optional: Select Add font variant for each additional weight or style. Enter a separate URL and matching weight and style for each variant.
6. Review the Fallback Font and choose the backup font to use if your custom font cannot load. Select Save.

After saving, your font is available in the Fonts section. Follow the steps to use your custom font in a sign-up form to apply it to your form and publish your changes.

Site font impacted by Klaviyo.js

Klaviyo’s onsite JavaScript (Klaviyo.js) must be installed manually or through your ecommerce integration for Klaviyo sign-up forms to display on your website. When forms load, Klaviyo.js adds the font definitions saved in your Klaviyo font library to your site. If these use the same font family as your site with different weights or styles, they can change how site text looks, such as the weight of a header.

There are 2 options for resolving any changes made to your fonts by Klaviyo.js. You can either:

• Delete the relevant fonts from your Klaviyo font library. Before deleting, check any forms that use the font: if the font is no longer available, they will display their fallback font.
• Update your site’s CSS to use the intended font family, weight, and style when Klaviyo.js loads your saved font variants.

Additional resources

• How to use custom fonts in sign-up forms
• Course: Creating an effective acquisition strategy using sign-up forms
• How to add custom fonts in email templates