跳到内容

在 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 Fonts 复制字体的 @import 代码
  • 在 HubSpot 帐户中,导航到内容 > 设计管理器
  • 查找器中,打开内容所用的样式表。
  • 将 @import 代码粘贴到样式表的第 1 行。
  • 将用于设置 CSS 规则的代码添加到样式表中相应的选择器中。
  • 在右上角单击 "发布 更改",即可将更改生效。

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

虽然 Apple Mail 和其他一些电子邮件客户端支持 Google 字体,但支持范围有限,大多数常用电子邮件客户端仅支持默认网页字体。了解更多有关 选择经典电子邮件编辑器中使用的默认字体的信息。
自定义编码的电子邮件模板仅适用于已订阅Marketing Hub Professional 或 Enterprise 的账户。
在自定义编码的电子邮件模板中添加 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 规则,以应用自定义字体。
  • 在右上角单击 "发布更改",即可将更改生效。

这篇文章有帮助吗?
此表单仅供记载反馈。了解如何获取 HubSpot 帮助