Custom Fonts in Signup Forms

read
Last updated at:

Overview

This article will walk you through how to use custom fonts 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.

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

2020-08-20_15-46-59.png

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.

2020-08-20_15-49-23.gif

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.

2020-08-20_16-14-32.gif

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.

2020-08-20_16-11-01.gif

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

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

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.

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

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.

Additional Resources 

x
Was this article helpful?
9 out of 17 found this helpful