Hosting a Custom Font on Your Site

read
Last updated at:

Overview

If you want to use a custom font in your signup form, but the font is not hosted by Google or Adobe, there are two options. You can either use the public font hosted on your ecommerce site or host your own font publicly and use the URL to import your font into your signup 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 start, you can use the public URL on your site to upload the font in Klaviyo. Head to your site, right-click, and select Inspect or Inspect Element depending on your internet browser. From there, navigate to Network > Fonts and 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 signup form.

After you’ve identified the font to import into Klaviyo, navigate to the headers tab and grab the URL of the font you want to use.

2020-08-20_16-34-50.gif

After you have the URL, head to the Asset Library and upload your custom font using the URL. LINK

Uploading a Self-Hosted Font

To start, 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, upload the font to your ecommerce site’s assets. You will need to do this within the code of your site. Then, 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.

After you have the URL, head to the Asset Library and upload your custom font using the URL. 

Additional Resources

 

x
Was this article helpful?
5 out of 10 found this helpful