How to use custom fonts in sign-up forms

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.

If your brand uses fonts that are not available in the sign-up form editor, add them to your Klaviyo font library before applying them to your forms. You can add Google fonts, Adobe fonts, or imported font files.

Key terms

• Custom font
  Any font that isn't provided by default in the Klaviyo editor. This includes:
  • Google fonts
  • Adobe fonts
  • Imported fonts
• Web-safe font
  A font that is stored locally on most devices, and therefore doesn't need to be loaded from an outside source in order to display.
• Fallback font
  A web-safe font that is used if a page is unable to load the primary font.

Adding custom fonts to your account

You can add Google fonts, Adobe fonts, or imported fonts to your account. First, open your font library:

1. Navigate to Content > Media & brand in the main menu, then select the Brand tab.
2. Select Fonts in the sidebar. If your sidebar shows Style instead, select it and find the Fonts section.

Adding a Google font

To add a Google font:

1. Click Add font, then select Google Font.
2. Open the Google Font dropdown to view available fonts. You can also browse Google fonts to compare options. If the font is already in your library, edit that font instead of adding it again.
3. Choose your desired font to see a preview and its available variants (e.g., bold or italic).
   • Open Font variants and select the weights and styles you want to use. Normal 400 is required and cannot be removed.
4. Select a Fallback font.
5. Click Save. Your added font will display in the Fonts section.

This content requires Functional cookies to be enabled.

Update Cookie Settings

From the Fonts section, you can see the fonts added to your account. To edit or delete a font, select the 3 dots next to it.

Adding an Adobe font

To add an Adobe Font:

1. Navigate to Adobe Fonts.
2. Search for the font you want to use, then select it.
3. Click the code icon (</>) or Add to Web Project.
4. Choose an existing web project or create a new one. Select the font weights and styles you want to include, then save the project.
5. Copy the stylesheet URL that starts with https://use.typekit.net/ from the project’s embed code. You can include the .css extension.

This content requires Functional cookies to be enabled.

Update Cookie Settings

6. Return to your font library in Klaviyo. Click Add font, select Adobe Fonts, then paste the URL into Adobe Fonts CSS address.
7. Click View fonts, then select a Fallback font for each new font family in the project. A font already in your account has a checkmark and displays its existing fallback font.

This content requires Functional cookies to be enabled.

Update Cookie Settings

8. Click Save.

Once you’ve added your fonts, they will be listed in the Fonts section. To edit a font, select the 3 dots next to it.

Adding an imported 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.

To add an imported font:

1. Click Add font, then select Custom font.
2. Enter a name in Custom font name. Choose a name that is not already in your font library.
3. Enter the Source URL for your font file, then select its Font weight and Font style. Use an accessible HTTPS URL with a filename ending in .woff, .woff2, .ttf, or .eot. SVG files are not supported.
4. Optional: To add another variant, click Add font variant and enter its source URL, weight, and style. Use a different source URL and a different weight/style combination for each variant.
5. Select a Fallback Font.
6. Click Save to add the font to the Fonts section.

This content requires Functional cookies to be enabled.

Update Cookie Settings

From Fonts, you can see the fonts imported into your account. To delete or edit a font, select the 3 dots next to it.

Edit a font

To edit an existing custom font:

1. Navigate to Content > Media & brand and select Brand. Select Fonts in the sidebar, or select Style and find Fonts if that is the sidebar option shown.
2. Find the font you want to edit in the Fonts section.
3. Click the 3 dots next to the font.
4. Choose Edit font. From here, you can:
   • Edit the fallback font for any custom font.
   • For Google fonts, select Font variants to add or remove weights and styles. Normal 400 must remain selected.
   • For imported fonts, including Klaviyo-hosted fonts, edit the source URL, weight, or style of a variant. Use Add font variant to add another file, or click the trash icon next to a variant to remove it. Keep at least 1 variant.

1. When you’re done editing a font in Klaviyo, click Save.

Delete a font

To delete a font:

1. Navigate to Content > Media & brand and select Brand. Select Fonts in the sidebar, or select Style and find Fonts if that is the sidebar option shown.
2. On the font you want to delete, click the 3 dots and choose Delete. A confirmation dialog opens. Forms using the font will display their fallback when the deleted font can no longer load.

3. Select Delete.

After a custom font is deleted, forms using it display their fallback font when the custom font can no longer load. If you re-add the same font family, those forms can use it again.

Using custom fonts in the sign-up form builder

To use your custom font in a sign-up form, simply edit the text in the form preview:

1. Navigate to the Sign-up forms tab.
2. Find the form you want to edit and click the 3 dots next to it, then select Edit.
3. In the form preview, select the text you'd like to edit.
4. In the text editor, highlight the text you want to format.
5. Use the font dropdown in the text editor to select your custom font and variant under Your Fonts.

1. Once you’re satisfied with your changes, click Publish or schedule.
2. Select the Publish now option. Resolve any blocking alerts shown, then click the Publish now button to make your changes live.

This content requires Functional cookies to be enabled.

Update Cookie Settings

Site font impacted by Klaviyo.js

Klaviyo onsite tracking (Klaviyo.js) must be installed manually or through your ecommerce integration to display Klaviyo sign-up forms on your website. Klaviyo.js loads Google and imported font variants saved in your font library, as well as the stylesheet for each Adobe web project you’ve added. If your website uses the same font family, these definitions can affect its appearance, such as the weight of a 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. Forms that use those fonts will display their fallback fonts when the deleted fonts can no longer load.
• Update your website’s CSS and font definitions so they do not conflict with the font families, weights, and styles loaded by Klaviyo.js.

Additional resources