如何在注册表单中使用自定义字体

你将会学到

了解如何使用自定义字体设计注册表单，以便您的客户体验到强大的品牌标识以及与网站其他部分的一致性。创建设计精美的注册表单对于迫使他们实现表单的目标至关重要。如果您的品牌使用注册表单编辑器中本身不可用的字体，则添加这些自定义字体是使您的表单看起来与网站的其他部分具有凝聚力的简单方法。添加字体后，您可以根据需要使用字体自定义注册表单。

关键术语

• 自定义字体

Klaviyo 编辑器中默认未提供的任何字体。这包括：

• 谷歌字体
• Adobe 字体
• 导入字体
• 网络安全字体

大多数设备本地存储的字体，因此不需要从外部源加载即可显示。 – 后备字体 当页面无法加载主要字体时使用的网络安全字体。

将自定义字体添加到您的帐户

从左侧的主菜单中，导航至内容 > 图像和品牌。从那里，单击“字体”选项卡。您可以添加 Google 字体、Adobe 字体或导入的字体。如果您向 Klaviyo 添加您网站上已使用的自定义字体，请上传您网站当前使用的确切字体样式（例如，浅色、粗体或斜体）和粗细（例如，400）。如果您上传字体并选择稍有不同的样式或粗细，则 Klaviyo 中选择的样式可能会覆盖您网站的某些现有字体样式。

添加 Google 字体

添加 Google 字体：

1. 选择字体名称下拉列表以查看所有可用的 Google 字体 的列表，但您已在帐户中加载的字体除外。
2. 选择您想要的字体。选择后，您将在下拉列表下方看到字体预览，以及可能的变体数量（例如粗体、斜体等）。 – 如果您要添加 1 种以上变体，请单击可能变体数量旁边的箭头，然后选择要添加的字体。
3. 选择后备字体。
4. 单击添加字体。您添加的字体现在将显示在页面底部的您的字体部分中。

从 您的字体 部分，您将能够看到已添加到帐户的字体。要编辑或删除此部分中的任何字体，请选择字体上的三个点。

如果您出于 GDPR 目的选择使用 Google 字体，请注意 Google 字体由 Google 托管。通过将 Google 字体添加到您的字体库中，您将使用 Google 字体。 Klaviyo 提供了一系列我们在注册表单模板中使用的自定义字体，供您轻松导入和使用。 查看 Klaviyo 托管字体列表。

添加 Adobe 字体

您必须拥有 Adobe 帐户才能使用 Adobe 字体。要添加 Adobe 字体：

1. 导航至 Adobe Fonts。
2. 搜索您的 Adob​​e 字体链接，然后选择您的字体。
3. 单击字体名称旁边的代码图标。
4. 如果需要，输入新的项目名称，然后单击保存。
5. 在下一个模式中，复制要添加的字体的 https://use.typekit.net URL。复制时请勿将 .css 作为 URL 的一部分包含在内。

6. 导航回 Klaviyo 并将 URL 粘贴到 CSS 地址 字段中。
7. 选择继续，然后为要上传的字体选择后备字体。请注意，如果您的帐户中已有某种字体，则该字体旁边会显示一个绿色复选标记，并且会显示其现有的后备字体。

8. 选择添加字体。添加字体后，它将列在页面底部的 您的字体 部分中。要编辑此部分中的任何字体，请选择字体上的三个点。

添加导入的字体

如果您购买或下载了非第三方源托管的自定义字体，您仍然可以在 Klaviyo 表单中使用它。首先，将字体文件托管在 Klaviyo 可以访问的位置（例如，在您网站的资产中或在字体托管平台上）。确保通过将“Access-Control-Allow-Origin header”设置为“*”来启用跨源资源共享 (CORS)，以便收件人的设备可以访问该字体。要添加导入的字体：

1. 为您的字体命名。
2. 指定字体粗细、样式和源 URL。源 URL 必须是以 WOFF、WOFF2、TTF、EOT 或 SVG 结尾的有效 URL。
3. 可选：要添加其他变体，请选择添加字体变体，然后为此变体重复步骤 2。
4. 选择添加字体 将此字体添加到您的字体部分。

从您的字体，您将能够看到已导入帐户的字体。您还可以通过选择字体上的 3 个点来删除或编辑字体。

编辑字体

要编辑现有的自定义字体：

1. 导航到内容 > 图像和品牌 > 字体。
2. 在页面底部的 您的字体 部分找到您要编辑的字体。
3. 在该字体卡中，单击顶角的 3 个点。
4. 选择编辑。从这里，您将能够：

• 编辑任何自定义字体的后备字体。 – 仅适用于 Google 和 Klaviyo 托管的字体，通过选择 字体变体 展开列表，然后选择您想要添加的任何字体，编辑或添加到选定的变体。

上传 Adobe 字体后，您无法添加变体，因为变体内置于您的 Typekit 链接中。要向 Adob​​e 字体添加变体，您必须删除现有字体，然后使用包含您要包含的所有变体的不同 Typekit 链接重新添加它。 5. 完成字体编辑后，选择更新字体。

删除字体

要删除字体：

1. 导航至 您的字体 部分。
2. 在您要删除的字体上，单击 3 个点，然后选择 删除。如果您选择删除字体，则会弹出一个模式，通知您，如果您的字体以任何形式使用，则在删除添加的字体后将显示您的后备字体。

3. 选择删除。删除自定义字体后，Klaviyo 中当前使用自定义字体的任何表单将立即恢复为后备字体。如果您重新添加字体，这些表单将再次开始使用它。

在注册表单生成器中使用自定义字体

要在注册表单中使用自定义字体，只需在表单预览中编辑文本即可：

1. 导航至注册表单选项卡。
2. 找到您要编辑的表单，然后单击其旁边的 3 个点，然后选择编辑表单。
3. 在表单预览中，选择您要编辑的文本。
4. 在右侧的文本菜单中，突出显示文本。
5. 使用顶部的字体下拉列表选择您的自定义字体。请注意，您帐户的 您的字体 部分中的字体将显示在列表顶部。 编辑时，您的自定义字体将出现在画布中（例如编辑预览），但不会出现在左侧面板中。左侧面板将显示您的备用字体而不是自定义字体。
6. 一旦您对更改感到满意，请单击发布以使它们生效。

受 Klaviyo.js 影响的网站字体

Klaviyo 主动现场跟踪 (Klaviyo.js)，必须手动安装或通过电子商务集成安装，才能在您的网站上发布 Klaviyo 注册表单。如果您只加载了一些字体变体，Klaviyo.js 会在将其注入您的网站时加载库中的其余变体。因此，在此过程中可能会对您网站上的字体进行轻微编辑，例如网站标题粗细的更改。有 2 个选项可用于解决 Klaviyo.js 对字体所做的任何更改。您可以：

• 从 Klaviyo 字体库中删除相关字体。 – 更新网站标题上的 CSS，以便在 Klaviyo.js 加载其他变体时它不会被覆盖。由于此选项需要深入的 CSS 知识，因此您可能需要开发人员的帮助。 Klaviyo 无法提供调整网站 CSS 的帮助，但我们确实拥有庞大的合作伙伴网络。

其他资源

• 课程：使用注册表单创建有效的获取策略
• 如何在您的网站上托管自定义字体