How to host a custom font on your site

You will learn

Learn how to upload a font, meaning a font that is not hosted by Google or Adobe, to your ecommerce site to import 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.

Using your website’s font

To begin, you can use the public URL on your site to upload the font in Klaviyo.

1. Head to your site.
2. Right-click to select Inspect or Inspect Element, depending on your internet browser.
3. From there, navigate to Network > Fonts.
4. Refresh the page.
   You will see all of your fonts listed. If the name of the font does not populate and you instead see a string of numbers and letters, select the preview tab to decide which font you want to use in your sign-up form.
5. Under Name, click on the font you want to import.
6. Select the Headers tab.
7. Copy the URL of the font you want to use.
8. In Klaviyo, navigate to Content > Images & brand > Fonts.
9. Select Import font.
10. Upload your custom font by pasting the URL in the Source Address.

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, EOT, or SVG 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 to your ecommerce site’s assets. You will need to do this within the code of your site.
2. Save it.

For more information, head to the respective ecommerce platform help centers for more information on how to add an asset to your site

• Shopify
• BigCommerce

Once you get the URL, navigate back to Klaviyo and select Content > Images & brand > Fonts. From here, click the Import font tab and import your font.

Site font impacted by Klaviyo.js

Klaviyo active On site tracking (Klaviyo.js), must be installed manually or through your ecommerce integration in order to publish Klaviyo sign-up forms on your website. If you have only loaded some font variations, Klaviyo.js loads the remaining variations in your library when it's injected into your site. Because of this, the fonts on your site may be slightly edited in this process, such as a change in the weight of the site's 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. 
• Update the CSS on your site's header so that it doesn't get overwritten when Klaviyo.js loads the additional variations. 
  

  Because this option would require in-depth knowledge of CSS, you may require the assistance of a developer. Klaviyo cannot offer assistance on adjusting your site's CSS, however we do have a vast partner network.

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