You will learn
Learn how to design your sign-up forms with custom fonts so that your customers experience strong brand identity and consistency with the rest of your site.
Creating a beautifully designed sign-up form is paramount to compelling them to follow through with the goal of your form. If your brand uses fonts that are not available natively in the sign-up form editor, adding in these custom 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 sign-up form as you see fit.
Adding custom fonts to the form builder
From the main menu along the left side, navigate to the Content > Images & Brand. From there, click into 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 1 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 3 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 3 dots on the font.
Edit 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.
Delete font
Click the 3 dots next to a font to delete it. 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.