Creating a beautifully designed signup form is paramount to giving your customers a strong brand identity and compelling them to follow through with the goal of your form. If your brand uses fonts that are not available natively in the signup form builder, adding in your brand’s fonts is an easy way to make your forms look cohesive with the rest of your site. After you’ve imported your fonts, you will be able to use your font to customize your signup form as you see fit. Let’s dive into how you can add custom fonts to the signup form builder.
Adding Custom Fonts to the Form Builder
From the dashboard, select Brand Library from the left-hand navigation and click into the Fonts tab. From the fonts tab, you can add in a Google, Adobe, or Custom-Hosted font.
If you add a custom font to Klaviyo that is already in use on your site, upload the exact font style (e.g., light, bold, or italic) and weight (e.g., 400) your site currently uses. If you upload a font and select a style or weight that differs slightly, the styles selected in Klaviyo may override some of your site’s existing font styles.
Adding a Google Font
To add a Google font, select the dropdown of available Google fonts. In the dropdown, you’ll see all Google fonts except the fonts you have already loaded in your account. Select your desired font, and you will see the font displayed below the dropdown and the variants possible (e.g., bold, italic, etc.). If you want to add more than one variant, select the dropdown and choose the fonts that you want to add.
From Your Fonts, you’ll be able to see the fonts that you have imported into your account. You can also delete or edit your fonts by selecting the three dots on the font. You will be able to edit the selected variants as well as the fallback font.
After you’ve chosen your font, select a fallback font and click Add Font. Your added font will display in the Your Fonts section.
Adding an Adobe Font
You must have an Adobe account to use Adobe fonts.
To add an Adobe Font, search for your Adobe font LINK. After selecting your font, click the code icon, and grab the https://use.typekit.net URL for the font that you want to add. Do not include the .css as part of the URL.
Paste the URL into the CSS URL field and select Import. After your font is imported, you will be able to select which fonts you want to upload.
Give fallback fonts to the fonts you want to upload and select Add Font(s). If a font is already available on your account there will be a green checkmark next to the font and the existing fallback font will be displayed.
After you’ve selected Add Font(s), your font will be listed in Your Fonts. You can also delete or edit your fonts by selecting the three dots on the font.
Adding a Custom Font
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 form. First, 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). 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’ devices.
For each variant, name your font, specify a font-weight, style, and a source URL. The source URL must be a valid URL that ends in WOFF, WOFF2, TTF, EOT, or SVG. After you’ve selected Add Font(s), your font will be listed in Your Fonts.
From Your Fonts, you’ll be able to see the fonts that you have imported into your account. You can also delete or edit your fonts by selecting the three dots on the font.
If you choose to edit your font, you will be able to edit the fallback font and, for Google fonts only, the selected variants. When you’re done editing your font, select Update Font.
If you choose to delete your font, a modal will pop up notifying you that, if your font is used in any forms, your fallback font will display after you delete your added font.