在 HubSpot 中使用字体
上次更新时间: 二月 13, 2025
HubSpot 中内容可用的字体取决于内容类型和字体类型。某些默认字体可在所有内容编辑器中使用,而网络字体(如 Google 字体)和自定义字体则有额外限制,概述如下:
内容类型 | 字体类型 | |||
默认字体 | 网络字体 | 自定义字体 |
||
页面 - 主题模板 | ✓ | 可通过主题设置和样式表进行设置 | ✓ | |
页面 - 编码模板 | ✓ | 通过样式表或自定义模块提供 | 通过样式表提供 | |
博客 | ✓ | 通过样式表或自定义模块提供 | ✓ | |
电子邮件 | 某些默认字体无法在拖放式电子邮件编辑器中使用 | 仅适用于自定义编码的电子邮件模板;大多数电子邮件客户端不支持该功能 | 仅适用于自定义编码的电子邮件模板;大多数电子邮件客户端不支持该功能 | |
知识库 | ✓ | 在模板编辑器的 "设计 "选项卡 上可用 | 不详 | |
自定义模块 | ✓ | 可用于电子邮件中未使用的自定义模块 | 可用于电子邮件中未使用的自定义模块 | |
CTA(传统) | ✓ | ✓ | ✓ | |
CTA | ✓ | ✓ | ✓ |
请注意:并非所有账户都提供所有内容类型。您的 HubSpot 账户中订阅的可用内容类型可在产品和服务目录中找到。
使用默认字体
默认字体可用于所有类型的内容,并可在大多数平台和设备上加载。
-
导航至您的内容:
- 网站页面:在 HubSpot 帐户中,导航到内容 > 网站页面。
- 登陆页面:在 HubSpot 帐户中,导航到内容 > 登陆页面。
- 博客:在 HubSpot 帐户中,导航到内容 > 博客。
- 知识库:在 HubSpot 帐户中,导航到内容 > 知识库。
- 电子邮件:在 HubSpot 帐户中,导航到营销 > 营销电子邮件。
- 点击内容名称。
- 在内容编辑器中,单击富文本模块,然后高亮显示要编辑的文本。
- 在富文本工具栏中,单击字体 下拉菜单并选择字体。以下字体可用于富文本模块:
-
Andale Mono*
-
Arial
-
Book Antiqua*
-
Courier New
-
乔治亚
-
Helvetica
-
Impact*
- Lato**
- Merriweather**
-
-
- 摩纳哥*
-
-
符号*
-
塔霍马
-
终端*
-
Times New Roman
-
Trebuchet MS
-
Verdana
-
*不能在拖放电子邮件编辑器中使用。
**在拖放式电子邮件编辑器中只能作为网页字体使用。
使用网络字体
对于使用启动模板和主题的页面,以及知识库文章和自定义模块,内容编辑器默认提供网络字体。
如果你是开发人员,还可以使用字体字段将网络字体添加到主题和自定义模块中。以这些方式使用时,网络字体不会从第三方服务中加载;HubSpot 会直接在内容域中加载它们。
请注意:不能在富文本编辑器的字体下拉菜单中选择网络字体。
您还可以使用第三方服务,如Google Fonts,方法是复制字体的导入代码,将其粘贴到内容的样式表中,然后通过 CSS 应用字体:
- 导航至fonts.google.com。
- 在搜索栏中输入字体名称。
- 单击字体名称,查看可导入的样式列表。
- 在要导入的每个样式旁边,单击+ 选择此样式
- 在右侧面板中,选择 "在网络上使用 " 部分中的@import 。
- 复制字体代码:
- 在 "在网页上使用 " 部分,复制不带 <style> 标记的 @import 代码。
- 在CSS 规则指定族字 段中,复制用于设置 CSS 规则的 代码 。
从 Google Fonts 获取代码后,就可以将字体添加到 HubSpot 内容中:
- 在样式表中使用 Google 字体
- 在自定义编码的电子邮件模板中使用 Google 字体
- 在 CTA 中使用 Google 字体(传统)
- 在表单中使用 Google 字体
- 在自定义模块中使用 Google 字体
在样式表中使用 Google 字体
- 从 Google Fonts 复制字体的 @import 代码。
- 在 HubSpot 帐户中,导航到内容 > 设计管理器。
- 在查找器中,打开内容所用的样式表。
- 将 @import 代码粘贴到样式表的第 1 行。
- 将用于设置 CSS 规则的代码添加到样式表中相应的选择器中。
- 在右上角单击 "发布 更改",即可将更改生效。
在自定义编码的电子邮件模板中使用 Google 字体
- 从 Google Fonts 复制字体的 @import 代码。
- 在 HubSpot 帐户中,导航到内容 > 设计管理器。
- 在查找器中,打开自定义编码的电子邮件模板。
- 在模板的
<head>
部分,在<style>....</style>
标记之间粘贴 @import 代码。 - 在电子邮件正文的代码中,以内联样式添加自定义字体。
- 在右上角单击 "发布更改",即可将更改生效。
在 CTA 中使用 Google 字体(传统)
- 复制 Google 为该字体设置 CSS 规则的代码。
- 在 HubSpot 帐户中,导航到营销 > CTA。
- 将鼠标悬停在 CTA 上,然后点击操作 >编辑。
- 在右侧面板中,单击高级选项。
- 在文本框中,粘贴 Google 为该字体设置 CSS 规则的代码。
- 在右下角单击 "下一步"。然后点击保存。
在表单中使用 Google 字体
- 在 HubSpot 帐户中,导航到营销 > 表单。
- 将鼠标悬停在表单名称上,然后单击操作 > 编辑表单或创建新表单。
- 在表单编辑器中,单击 "样式和预览"选项卡。
- 在左侧边栏菜单中,单击 "样式 "部分。
- 在文本 部分,点击字体系列下拉菜单,选择Google 字体。
- 在右上角单击 "更新 "或"发布",即可实时更新更改内容。
在自定义模块中使用 Google 字体
请注意:Google 字体不适用于电子邮件模板中使用的自定义模块。
- 在 HubSpot 帐户中,导航到内容 > 设计管理器。
- 在右上角单击 "发布更改 ",即可将更改生效。
-
导航至您的内容:
- 网站页面:在 HubSpot 帐户中,导航到内容 > 网站页面。
- 登陆页面:在 HubSpot 帐户中,导航到内容 > 登陆页面。
- 博客:在 HubSpot 帐户中,导航到内容 > 博客。
- 点击使用自定义模块的内容名称。
- 在内容编辑器中,点击自定义模块。
- 在侧边栏编辑器中,点击字体字段 下拉菜单,选择Google 字体。
使用自定义字体
除了使用标准网络字体或Google Fonts 等字体库,您还可以上传字体文件,然后在主题中使用它们或在样式表中引用它们。
在主题中使用自定义字体
在主题编辑器中,您可以上传自定义字体,然后在页面和文章中使用该字体。字体文件支持以下格式:ttf、otf、woff。
上传自定义字体
-
导航至您的内容:
- 网站页面:在 HubSpot 帐户中,导航到内容 > 网站页面。
- 登陆页面:在 HubSpot 帐户中,导航到内容 > 登陆页面。
- 博客:在 HubSpot 帐户中,导航到内容 > 博客。
- 点击内容名称。
- 在内容编辑器中,单击 "编辑 "菜单并选择主题:[主题名称]。
- 在左侧边栏菜单中,单击字体 下拉菜单,然后选择上传自定义字体。
- 在右侧面板的字体名称 字段中输入字体标签 。
- 单击选择字体文件并选择一个或多个字体文件,然后单击下一步。
- 单击 字体样式 1 下拉菜单,选择字体文件使用的样式 。每个样式必须使用单独的字体文件。
- 要添加其他字体样式,请单击+ 添加另一种字体样式,然后添加字体样式。每个上传的字体文件必须至少有一个相关样式。
- 添加完所有适用的字体样式后,单击完成。
编辑自定义字体
在主题编辑器中上传自定义字体后,你还可以上传其他字体,用其他字体样式自定义现有字体,或删除字体。
-
导航至您的内容:
- 网站页面:在 HubSpot 帐户中,导航到内容 > 网站页面。
- 登陆页面:在 HubSpot 帐户中,导航到内容 > 登陆页面。
- 博客:在 HubSpot 帐户中,导航到内容 > 博客。
- 点击内容名称。
- 在内容编辑器中,单击 "编辑 "菜单并选择主题:[主题名称]。
- 在左侧边栏菜单中,点击展开字体 部分。
- 单击 字体 下拉菜单 ,然后选择管理自定义字体。
- 要添加新字体,请单击对话框中的添加自定义字体 。
- 编辑字体
- 在对话框中,单击字体旁边的操作 下拉菜单,然后选择编辑。
- 要更改字体名称,请单击字体名称旁边的编辑,然后输入新的字体名称。
- 要添加其他字体样式,请单击添加另一种字体样式,然后单击字体样式 下拉菜单并选择一种样式。单击上传,然后上传字体文件。
- 要删除字体样式,请单击字体样式旁边的deletededel 删除 图标。如果没有列出其他字体样式,则不能删除字体样式。
- 单击保存。
- 要删除字体,请单击对话框中的 "操作"下拉菜单并选择 "删除"。
请注意:删除字体会将其从所有下拉菜单中删除,但字体文件会保留在文件工具中,直到删除为止。
- 完成字体编辑后,单击 "完成"。
在样式表中使用自定义字体
除了使用标准网页字体或Google Fonts 等字体库,你还可以在文件工具中托管字体文件,然后在样式表中引用它们。
请注意: 自定义字体仅适用于可访问设计管理器的账户,并且需要使用 CSS 应用。添加自定义字体不会将字体添加到内容编辑器的样式下拉菜单中。
要在内容中使用字体,请将字体文件上传到文件工具。建议至少上传字体的.woff、.ttf 和 .eot版本,以确保字体能在所有浏览器上加载。您可以使用字体松鼠转换器工具的 专家 模式生成其他文件格式。
- 在 HubSpot 帐户中,导航到库 > 文件。
- 单击上传文件。
- 在计算机硬盘上选择字体文件,然后单击 "打开"。
- 单击上传字体文件的名称。
- 在右侧面板中,单击 "复制 URL",复制文件所在的 URL。每种文件格式都需要字体的 URL。
在样式表中使用自定义字体
在文件工具中添加自定义字体后,就可以在样式表中引用它。每种字体样式(斜体、粗体等)都需要单独的@font-face规则。了解有关在 HubSpot 中使用样式表的更多信息。
- 在 HubSpot 帐户中,导航到内容 > 设计管理器。
- 在查找器中,打开内容所用的样式表。
- 对于每种字体样式:
- 在样式表顶部粘贴以下代码:
@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');}
-
- 将 "字体名称 " 替换为字体名称。
- 用文件工具中的URL 替换your_font_file.xxx? 。对每种文件格式重复上述步骤。
- 使用font-family属性创建 CSS 规则,以应用自定义字体。
- 在右上角单击 "更新 "或"发布",您的更改就会生效。
在自定义编码的电子邮件模板中使用自定义字体
大多数流行的电子邮件客户端都不支持自定义字体。为确保读者获得一致的体验,建议在电子邮件中使用默认网页字体。不过,如果您想在自定义编码的电子邮件模板中添加自定义字体,可以在将自定义字体添加到文件工具后进行添加。
- 在 HubSpot 帐户中,导航到内容 > 设计管理器。
- 在查找器中,打开自定义编码的电子邮件模板。
- 对于每种字体样式:
- 在模板的 <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');}
-
- 将 "字体名称 " 替换为字体名称。
- 用文件工具中的URL 替换your_font_file.xxx? 。对每种文件格式重复上述步骤。
- 在电子邮件正文的代码中,以内联样式添加自定义字体。
- 在右上角单击 "更新 "或"发布",即可实时更新更改。
在 CTA 中使用自定义字体
在主题中添加自定义字体后,就可以在 CTA 中使用它了:
- 在 HubSpot 帐户中,导航到营销 > CTA。
- 点击左上角的下拉菜单 ,选择CTA
- 将鼠标悬停在 CTA 上,然后单击操作 >编辑。
- 在 CTA 编辑器的左侧面板中,单击 "设计"选项卡。
- 单击 "样式 " 部分展开。
- 单击主字体 下拉菜单,选择自定义字体。
- 继续创建 CTA。
在 CTA 中使用自定义字体(传统)
与 CTA 类似,上传自定义表单文件后,您可以将其与传统的 CTA 一起使用:
- 在 HubSpot 帐户中,导航到营销 > CTA。
- 将鼠标悬停在 CTA 上,然后单击操作 >编辑。
- 在右侧面板中,单击高级选项。
- 在文本框中粘贴此代码:
font-family: 'Your Font Name';
- 用字体名称 替换您的 字体名称。
- 在右下角单击 "下一步"。然后点击保存。
在自定义模块中使用自定义字体
在文件工具中添加自定义字体后,就可以在自定义博客或页面模块中使用它。了解如何在自定义编码的电子邮件模板中添加自定义字体。
- 在 HubSpot 帐户中,导航到内容 > 设计管理器。
- 在查找器中打开自定义模块。
- 在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');}
- 用字体名称 替换您的 字体名称。
- 用文件工具中的URL 替换your_font_file.xxx? 。对每种文件格式重复上述步骤。
- 使用font-family属性创建 CSS 规则,以应用自定义字体。
- 在右上角单击 "发布更改",即可将更改生效。