在 HubSpot 中使用字体

在 HubSpot 中，字体的使用方式会根据内容类型和字体类型而有所不同。所有内容编辑器中都提供了一些默认字体。可能需要将网页字体和自定义字体添加到主题设置、样式表、自定义模块或代码模板中。

开始之前

在开始在 HubSpot 中使用字体之前，请先了解相关要求和注意事项。

了解局限性和注意事项

• 并非所有内容类型在所有账户中都可用。要确认您的订阅中包含哪些内容类型，请查阅 “ & 服务目录”。
• 请查看下表，了解每种内容类型可用的字体选项：

在富文本模块中使用默认字体

HubSpot 中的所有内容均支持默认字体，但可用的选项以及可应用的位置取决于内容类型。

1. 导航至您的内容：

   • 网站页面： 在你的 HubSpot 帐户中，单击更多，然后导航到内容 > 网站页面。如果你的帐户中未显示更多，请直接导航到内容 > 网站页面。
   • 登陆页面： 在你的 HubSpot 帐户中，单击更多，然后导航到内容 > 登陆页面。如果你的帐户中未显示更多，请直接导航到内容 > 登陆页面。
   • 博客 在您的 HubSpot 账户中，点击更多，然后导航至内容 > 博客。如果您的账户中未显示更多，请直接导航至内容 > 博客。
   • 电子邮箱： 在你的 HubSpot 帐户中，单击更多，然后导航到营销 > 电子邮件。如果你的帐户中未显示更多，请直接导航到营销 > 电子邮件。
2. 点击您的内容 名称 。
3. 在内容编辑器中，单击一个富文本模块，然后选中要编辑的文本。 
4. 在富文本工具栏中，单击“字体”下拉菜单，然后选择一种 字体。富文本模块中支持以下字体：

使用网页字体

某些 HubSpot 内容支持网页字体，但在富文本编辑器的 “字体 ”下拉菜单中无法使用这些字体。根据内容类型不同，Web 字体可在主题设置、样式表、自定义模块或代码模板中应用。 

开发者可以使用 “字体”字段 将网页字体添加到主题和自定义模块中。以这种方式添加网页字体时，HubSpot 会直接在内容的域名上加载这些字体，而不是从第三方服务加载。

要使用 Google Fonts 等第三方服务，请复制字体的导入代码，将其粘贴到内容的样式表中，然后通过 CSS 应用该字体：

1. 访问 fonts.google.com。
2. 在搜索栏中输入字体名称。 
3. 点击 字体名称 ，即可查看可供导入的样式列表。
4. 点击右上角的“获取字体”。
5. 点击右上角的“获取嵌入代码”。
6. 在右侧栏的 “Web ”选项卡中，选择 @import 。
7. 复制 @import代码 时，请勿包含 <style> 标签。
8. 复制用于设置 CSS 规则的CSS 类代码 。 

9. 从 Google Fonts 复制代码后，您可以将该字体添加到 HubSpot 内容中： 

• • 在样式表中使用 Google 字体
  • 在自定义编写的电子邮件模板中使用 Google 字体
  • 在CTA中使用Google字体（旧版）
  • 在表单中使用 Google 字体
  • 在自定义模块中使用 Google 字体

在样式表中使用 Google 字体

1. 从 Google Fonts 复制该字体的 @import 代码。
2. 在你的 HubSpot 帐户中，单击更多，然后导航到内容 > 设计管理器。如果你的帐户中未显示更多，请直接导航到内容 > 设计管理器。
3. 在 “访达”中，打开用于您内容的样式表。
4. 将 @import 代码 粘贴到样式表 的第一行 。 
5. 在样式表中，将用于为相应选择器设置 CSS 规则的代码添加进去。
6. 在右上角，点击“发布 更改 ”以将您的更改生效。 

在自定义编写的电子邮件模板中使用 Google 字体

Apple Mail 以及其他一些电子邮件客户端支持 Google Fonts，但广泛支持的范围有限。大多数流行的电子邮件客户端仅支持默认的网页字体。了解有关 如何选择经典邮件编辑器中默认字体的更多信息。 

要在自定义编写的电子邮件模板中添加 Google 字体： 

1. 从 Google Fonts 复制该字体的 @import 代码。
2. 在你的 HubSpot 帐户中，单击更多，然后导航到内容 > 设计管理器。如果你的帐户中未显示更多，请直接导航到内容 > 设计管理器。
3. 在 “访达”中，打开自定义编码的电子邮件模板。
4. 在<head> 模板的 <style>....</style> 标签之间粘贴 @import 代码。 
5. 在模板的 ` <body> ` 部分，通过 内联样式添加自定义字体。 
6. 在右上角，点击 “发布更改”以将您的更改生效。 

在CTA中使用Google字体（旧版）

1. 复制谷歌用于为该字体设置 CSS 规则的代码。
2. 在你的 HubSpot 帐户中，单击更多，然后导航到营销 > CTA。如果你的帐户中未显示更多，请直接导航到营销 > CTA。
3. 将鼠标悬停在“CTA”上，然后点击“ 操作” >“编辑”。 
4. 在右侧面板中，单击“高级选项”。 
5. 在文本框中，粘贴谷歌提供的用于为该字体设置 CSS 规则的代码。 
6. 在右下角，单击“下一步”。然后点击 保存。

在表单中使用 Google 字体

1. 在你的 HubSpot 帐户中，单击更多，然后导航到营销 > 表单。如果你的帐户中未显示更多，请直接导航到营销 > 表单。
2. 将鼠标悬停在表单名称上，然后点击“操作” > “编辑表单”或 “创建新表单”。
3. 在表单编辑器中，单击 “样式” & 预览 选项卡。 
4. 在左侧边栏菜单中，点击“样式”部分。
5. 在“文本”部分，点击“字体家族 ”下拉菜单，然后选择一种Google 字体。 
6. 在右上角，点击“更新”或“发布” 以将您的更改生效。 

在自定义模块中使用 Google 字体

请注意： 电子邮件模板中使用的自定义模块无法使用 Google Fonts。

1. 在你的 HubSpot 帐户中，单击更多，然后导航到内容 > 设计管理器。如果你的帐户中未显示更多，请直接导航到内容 > 设计管理器。
2. 在 “访达”中，点击自定义模块的 名称 。了解有关 创建自定义模块的更多信息。
3. 在 检查器中，点击“字段”部分中的 “添加字段”下拉菜单，然后选择 “字体”。了解有关 使用字体字段的更多信息。

4. 在右上角，点击 “发布更改”以将您的更改生效。 
5. 导航至您的内容：
   • 网站页面： 在你的 HubSpot 帐户中，单击更多，然后导航到内容 > 网站页面。如果你的帐户中未显示更多，请直接导航到内容 > 网站页面。
   • 登陆页面： 在你的 HubSpot 帐户中，单击更多，然后导航到内容 > 登陆页面。如果你的帐户中未显示更多，请直接导航到内容 > 登陆页面。
   • 博客 在您的 HubSpot 账户中，点击更多，然后导航至内容 > 博客。如果您的账户中未显示更多，请直接导航至内容 > 博客。
6. 使用自定义模块点击内容 名称 。 
7. 在内容编辑器中，单击自定义模块。 
8. 在侧边栏编辑器中，点击“字体”字段的下拉菜单，然后选择一种Google 字体。 

使用自定义字体

作为使用标准网页字体或Google Fonts 等字体库的替代方案，您可以上传字体文件，然后在主题中使用这些字体，或在样式表中引用它们。 

在主题中使用自定义字体

在主题编辑器中，上传自定义字体，然后在页面和文章中使用该字体。支持以下格式的字体文件：TTF、OTF、WOFF。

为页面或文章上传自定义字体

上传自定义字体后，这些字体即可在页面、文章或知识库文章中使用。

1. 导航至您的内容：

   • 网站页面： 在你的 HubSpot 帐户中，单击更多，然后导航到内容 > 网站页面。如果你的帐户中未显示更多，请直接导航到内容 > 网站页面。
   • 登陆页面： 在你的 HubSpot 帐户中，单击更多，然后导航到内容 > 登陆页面。如果你的帐户中未显示更多，请直接导航到内容 > 登陆页面。
   • 博客 在您的 HubSpot 账户中，点击更多，然后导航至内容 > 博客。如果您的账户中未显示更多，请直接导航至内容 > 博客。
2. 点击您的内容 名称 。 
3. 在内容编辑器中，单击“编辑”菜单，然后选择“主题：[主题名称]”。
4. 在左侧边栏菜单中，点击任意字体下拉菜单 ，然后选择“管理品牌字体”。
5. 请按照 此知识库文章中的步骤 添加或编辑字体。

为知识库文章上传自定义字体

上传自定义字体后，这些字体即可在页面、文章或知识库文章中使用。

1. 在你的 HubSpot 帐户中，单击更多，然后导航到服务 > 知识库。如果你的帐户中未显示更多，请直接导航到服务 > 知识库。
2. 在右上角，点击“自定义模板”。
3. 在左侧边栏中，单击 “设计 ”选项卡。
4. 在左侧边栏中，点击 “字体样式”。
5. 点击任意字体下拉菜单 ，然后选择“管理品牌字体”。
6. 请按照 此知识库文章中的步骤 添加或编辑字体。

编辑自定义字体

在主题编辑器中上传自定义字体后，您可以 上传更多字体、通过添加字体样式来自定义现有字体，或者删除字体。

在样式表中使用自定义字体

除了使用标准网页字体或像Google Fonts 这样的字体库之外，您还可以将字体文件托管在“文件”工具中，然后在样式表中引用它们。 

请注意：自定义字体仅适用于具有 设计管理器 访问权限的账户，且需要通过 CSS 进行应用。添加自定义字体不会 将该字体添加到内容编辑器中的样式下拉菜单中。

要在内容中使用某种字体， 请将该字体的文件上传到“文件”工具中。建议至少上传字体的 .woff、.ttf 和 .eot 格式文件， 以确保字体能在所有浏览器中正常加载。您可以使用Font Squirrel 转换工具中的 “专家模式 ”来生成其他文件格式。

1. 在你的 HubSpot 帐户中，单击更多，然后导航到内容 > 文件。如果你的帐户中未显示更多，请直接导航到内容 > 文件。
2. 点击“上传文件”。
3. 在计算机的硬盘中，选中字体文件，然后单击“打开”。
4. 点击已上传的字体文件的 名称 。
5. 在右侧面板中，单击“复制网址 ”以复制文件所在的网址。您需要每种文件格式中字体的URL。

在样式表中使用自定义字体

将自定义字体添加到“文件”工具后，您可以在样式表中引用它。每种字体样式（斜体、粗体等）都需要一条单独的 @font-face 规则。了解有关 在 HubSpot 中使用样式表的更多信息。 

1. 在你的 HubSpot 帐户中，单击更多，然后导航到内容 > 设计管理器。如果你的帐户中未显示更多，请直接导航到内容 > 设计管理器。
2. 在 “访达”中，打开用于您内容的样式表。
3. 对于每种字体样式： 
   • 在样式表的顶部，粘贴以下代码： 

@font-face {
font-family: 'Your Font Name';
src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}


• • 请将“Font Name” 替换 为 该字体的名称。
  • 将your_font_file.xxx?替换为“文件”工具中的URL 。对每种文件格式重复此操作。

4. 使用 font-family 属性创建 CSS 规则，以应用自定义字体。 
5. 在右上角，点击 “更新”或“发布” 以将您的更改生效。 

在拖放式邮件编辑器中，在邮件中使用自定义字体

Apple Mail 支持自定义电子邮件字体，而三星邮件则部分支持。Gmail、Outlook 以及大多数移动网页客户端均不支持自定义字体。为了确保读者获得一致的阅读体验，建议在电子邮件中使用默认网页字体。

不过，如果您想在拖放式邮件编辑器中为邮件添加自定义字体，只需将自定义字体上传至品牌工具包并设置备用字体即可。 

1. 在品牌工具包中添加一款自定义字体，然后选择与该自定义字体最接近的备用字体。为避免备用字体相关的问题：  
   • 请使用与您的自定义字体 x 高度和字重相似的备用字体。
   • 在各种邮件客户端中预览营销邮件 ，以查看将使用哪些字体。
   • 确保所有重要元素在使用备用字体时都能按预期显示。
2. 在你的 HubSpot 帐户中，单击更多，然后导航到营销 > 电子邮件。如果你的帐户中未显示更多，请直接导航到营销 > 电子邮件。
3. 点击营销邮件的名称，或点击“创建邮件”来 创建一封新邮件。
4. 若要使用自定义字体为某些类型的文本（如段落或标题）设置样式：
   • 在电子邮件编辑器中，点击左侧边栏中的 模板设计图标。
   • 要在 “文本样式”部分设置字体，请单击下拉菜单，然后在“自定义字体 ”部分中选择一种字体。

5. 要在富文本模块中使用自定义字体： 
   • 在电子邮件编辑器中，选中富文本模块中的文本。
   • 在富文本编辑器中，点击字体下拉菜单，将鼠标悬停在“自定义字体”上，然后悬停在某个自定义字体上，并选择字体粗细。

6. 撰写电子邮件内容，然后 在多个邮件客户端中预览该邮件。
7. 完成并发送这封电子邮件。

在自定义编写的电子邮件模板中使用自定义字体

Apple Mail 支持自定义字体，而三星邮件则部分支持。Gmail、Outlook 以及大多数移动网页客户端均不支持自定义字体。为了确保读者获得一致的阅读体验，建议在电子邮件中使用默认网页字体。

不过，如果您想在自定义编写的电子邮件模板中添加自定义字体，只需先将 该自定义字体添加到“文件”工具中，即可实现。

1. 在你的 HubSpot 帐户中，单击更多，然后导航到内容 > 设计管理器。如果你的帐户中未显示更多，请直接导航到内容 > 设计管理器。
2. 在 “访达”中，点击您自定义编码的电子邮件模板 名称 。
3. 对于每种字体样式：
   • 在模板的 <head> 部分，将以下代码粘贴到 <style>....</style> 标签之间： 

@font-face {
font-family: 'Your Font Name';
src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}

1. • 请将“Font Name” 替换 为 该字体的名称。
   • 将your_font_file.xxx?替换为“文件”工具中的URL。对每种文件格式重复此操作。 

4. 在邮件正文的代码中，通过 内联样式添加自定义字体。 
5. 在右上角，点击 “更新”或“发布” 以将您的更改生效。 

在CTA中使用自定义字体

将自定义字体添加到主题后，您就可以在CTA中使用它了。

1. 在你的 HubSpot 帐户中，单击更多，然后导航到营销 > CTA。如果你的帐户中未显示更多，请直接导航到营销 > CTA。
2. 在左上角，点击 下拉菜单并 选择 “CTA”
3. 将鼠标悬停在“CTA”上，然后点击 “操作” >“编辑”。 
4. 在 CTA 编辑器的左侧面板中，单击 “设计” 选项卡。 
5. 点击 “样式 ” 部分 以展开。
6. 点击 “主字体”下拉 菜单，然后选择您 自定义的字体。 
7. 继续创建您的CTA。 

在CTA中使用自定义字体（旧版）

与CTA类似， 上传自定义字体文件后，可将其用于旧版CTA。

1. 在你的 HubSpot 帐户中，单击更多，然后导航到营销 > CTA。如果你的帐户中未显示更多，请直接导航到营销 > CTA。
2. 将鼠标悬停在“CTA”上，然后点击 “操作” >“编辑”。 
3. 在右侧面板中，单击“高级选项”。 
4. 在文本框中粘贴以下代码：
   
   font-family: 'Your Font Name';
5. 请将“Font Name”替换 为该字体的名称。
6. 在右下角，单击“下一步”。然后点击 保存。

在表单中使用自定义字体

“品牌设置 ”中的自定义字体和品牌字体无法直接在表单编辑器中使用。字体选择器中仅显示系统默认字体和 Google Fonts。

若要将自定义字体或品牌字体应用到表单中，必须先在嵌入该表单的页面或博客文章级别加载该字体：

• 主题模板： 在主题设置中，为显示表单的页面或博客添加自定义字体。了解有关 在主题中使用自定义字体的更多信息。
• 样式表： 在表单所在的页面或博客所应用的样式表中引用该自定义字体。了解有关在样式表中使用自定义字体的 的更多信息。

在自定义模块中使用自定义字体

在“文件”工具中添加自定义字体后，即可在自定义博客或页面模块中使用该字体。了解如何 在自定义编写的电子邮件模板中添加自定义字体。 

1. 在你的 HubSpot 帐户中，单击更多，然后导航到内容 > 设计管理器。如果你的帐户中未显示更多，请直接导航到内容 > 设计管理器。
2. 在 “访达”中，点击自定义模块的 名称 。
3. 在模块编辑器中，在module.css 部分粘贴以下代码：

@font-face {
font-family: 'Your Font Name';
src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}

5. • 请将“Font Name” 替换 为 该字体的名称。
   • 将your_font_file.xxx?替换为“文件”工具中的URL。对每种文件格式重复此操作。
6. 使用 font-family 属性创建 CSS 规则，以应用自定义字体。 
7. 在右上角，点击 “发布更改”以将您的更改生效。