How to host a custom font on your site

read
Last updated at:

You will learn

Learn how to upload a custom 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 a custom font in your sign-up form, there are two options:

  1. Use the public font hosted on your ecommerce site
  2. Host your own font publicly and use the URL to import your font into your sign-up forms.
This article will walk you through how upload a custom font to your ecommerce site to use in your forms, not your email templates. For information on adding custom fonts to your email templates, head to our article on custom fonts in email templates.

Using your website’s font

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

Note that this method for hosting a custom font is not supported with Shopify stores.

  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. 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

Once you get the URL, upload it into the Custom Fonts section of the Brand Library.

Additional resources

 

x
Was this article helpful?
187 out of 413 found this helpful