跳到内容
请注意：：本文仅为方便您阅读而提供。本文由翻译软件自动翻译，可能未经校对。本文的英文版应被视为官方版本，您可在此找到最新信息。您可以在此处访问。

在 HubSpot 中使用字体

上次更新时间： 2026年2月25日

可与以下任何订阅一起使用，除非另有说明：

HubSpot 中可用于内容的字体取决于内容类型和字体类型。所有内容编辑器均提供特定默认字体，而网络字体（如 Google Fonts）和自定义字体则存在额外限制，具体如下： 

内容类型 字体类型 字体类型 
  默认字体 网页字体

自定义字体

  
页面 - 主题模板 ✓ 可在主题设置中使用，也可通过样式表设置 ✓  
页面 - 编码模板 ✓ 可通过样式表或自定义模块实现 可通过样式表实现  
博客 ✓ 可通过样式表或自定义模块实现 ✓  
电子邮件 拖放式邮件编辑器中部分默认字体不可用 仅适用于自定义编码的邮件模板；大多数邮件客户端不支持 仅适用于自定义编码的电子邮件模板；不支持于大多数电子邮件客户端  
知识库 文章编辑器中无法自定义字体 主题设置中可用   主题设置中可用  
自定义模块 ✓ 适用于未在邮件中使用的自定义模块 适用于未在邮件中使用的自定义模块  
行动号召按钮（旧版） ✓ ✓ ✓  
CTA ✓ ✓ ✓  

请注意：并非所有内容类型在所有账户中均可用。您HubSpot账户订阅中可用的内容类型可在产品与服务目录中查看。 

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

默认字体适用于所有内容类型，并设计为可在大多数平台和设备上加载。 

  1. 导航至您的内容：

  2. 点击 内容 名称 。 
  3. 在内容编辑器中，点击富文本模块，然后选中需要编辑的文本。 
  4. 在富文本工具栏中，点击字体下拉菜单并选择字体。富文本模块支持以下字体： 
    • 品牌字体

    • Andale Mono*

    • Arial

    • 古体书体*

    • Courier New

    • Georgia

    • Helvetica

    • Impact*

    • Lato**
    • Merriweather**
    • 摩纳哥*

    • Symbol*

    • Tahoma

    • Terminal*

    • Times New Roman

    • Trebuchet MS

    • Verdana

*拖放式邮件编辑器中不可用。 

**拖放式邮件编辑器中仅支持作为网页字体使用。

使用网络字体

网页字体在内容编辑器中默认可用。

开发人员还可通过字体字段将网络字体添加至主题和自定义模块。采用此方式时，网络字体不会从第三方服务加载，而是由HubSpot直接在内容域名上加载。

请注意：富文本编辑器的字体下拉菜单中无法选择网络字体。 

您也可通过第三方服务（如Google Fonts）实现：复制字体导入代码，粘贴至内容样式表，再通过CSS应用字体：

  1. 访问fonts.google.com。
  2. 在搜索栏中输入字体名称。 
  3. 点击字体名称查看可导入的样式列表。
  4. 在需要导入的每种样式旁，点击+ 选择此样式
  5. 在右侧面板的"网页使用"区域选择@import。 
  6. 复制字体代码： 
    • 在"网页使用 "部分 ，复制不含<style>标签的@import代码。
    • 在"用于指定字体家族的CSS规则"字段中 ，粘贴用于设置CSS规则的代码。 

获取Google字体代码后，即可将其添加至HubSpot内容： 

在样式表中使用Google字体

  1. 从Google字体中复制字体的@import代码。
  2. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  3. 在文件浏览器中，打开用于您内容的样式表。
  4. 将@import代码粘贴到样式表的第一行。 
  5. 将设置CSS规则的代码添加到样式表中相应的选择器中。
  6. 在右上角点击发布 更改，使修改生效。 

在自定义代码邮件模板中使用Google字体

尽管Google字体被Apple Mail等少数邮件客户端支持，但广泛兼容性有限，主流邮件客户端仅支持默认网页字体。了解如何 在经典邮件编辑器中选择默认字体。 
 
自定义编码邮件模板仅适用于拥有 Marketing Hub 专业版 或 企业版订阅的账户。 
 
在自定义编码邮件模板中添加Google字体： 
  1. 从Google Fonts复制字体的@import代码。
  2. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  3. 在文件管理器中打开自定义编码的邮件模板。
  4. 在模板的<head>部分，将@import代码粘贴到<style>....</style>标签之间。 
  5. 在邮件正文代码中，通过内联样式添加自定义字体。 
  6. 点击右上角的发布更改按钮使修改生效。 

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

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

在表单中使用谷歌字体

  1. 在 HubSpot 帐户中，导航到营销 > 表单。
  2. 将鼠标悬停在表单名称上，点击操作 > 编辑表单或创建新表单。
  3. 在表单编辑器中，点击“样式与预览”选项卡。 
  4. 在左侧边栏菜单中，点击"样式"部分。
  5. 在文本部分，点击字体家族下拉菜单并选择一款谷歌字体。 
  6. 右上角点击更新或发布以使更改生效。 

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

请注意：邮件模板中使用的自定义模块不支持Google字体。


  1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  2. 在 左侧 资源管理器中 打开自定义模块。了解如何 创建自定义模块。
  3. 在右侧 检查器 中，点击“字段”部分的“添加字段”下拉菜单并选择“字体”。了解如何 操作字体字段。

  4. 在右上角，点击发布更改以使更改生效。 

  5. 导航至您的内容：

  6. 点击使用自定义模块的内容名称。 
  7. 在内容编辑器中点击自定义模块。 
  8. 在侧边栏编辑器中，点击字体字段下拉菜单并选择Google 字体。 

使用自定义字体

除使用标准网页字体或Google字体库外，您可上传字体文件，在主题中直接使用或通过样式表引用。 

在主题中使用自定义字体

在主题编辑器中，可上传自定义字体并在页面/文章中使用。支持字体文件格式：TTF、OTF、WOFF。

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

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

  1. 导航至您的内容：

  2. 点击您的内容名称。 
  3. 在内容编辑器中，点击编辑菜单并选择主题：[主题名称]。
  4. 在左侧边栏菜单中，点击任意字体下拉菜单并选择管理品牌字体。
  5. 按照知识库文章中的步骤 添加或编辑字体。

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

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

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

编辑自定义字体

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

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

除使用标准网页字体或Google Fonts等字体库外，您还可通过文件工具托管字体文件，并在样式表中引用。 

请注意：自定义字体仅对拥有设计管理器权限的账户开放，且需通过CSS应用。添加自定义字体不会将其加入内容编辑器的样式下拉菜单。 

要在内容中使用字体，请将字体文件上传至文件工具。建议至少上传.woff、.ttf和.eot版本，以确保字体在所有浏览器中正常加载。您可使用Font Squirrel转换工具的 专家模式 生成更多文件格式。

  1. 在 HubSpot 帐户中，导航到内容 > 文件。如果你正在使用 HubSpot 的免费工具，导航到营销 > 电子邮件。在右上方单击电子邮件工具并选择文件。
  2. 点击“上传文件”。 
  3. 在计算机硬盘中选择字体文件，然后点击打开。 
  4. 点击已上传字体文件的名称。 
  5. 在右侧面板中，点击"复制URL"以获取文件托管地址。您需要为每种文件格式的字体分别获取对应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');}
      • 将字体名称替换为您的 字体名称。
      • 将your_font_file.xxx?替换为文件工具生成的URL。每种文件格式均需重复此操作。
  1. 使用font-family属性创建 CSS 规则以应用自定义字体。 
  2. 在右上角点击更新或发布，使更改生效。 

在自定义代码邮件模板中使用自定义字体

大多数主流邮件客户端不支持自定义字体。为确保读者获得一致的体验，建议在邮件中使用默认网页字体。但若需在自编码邮件模板中添加自定义字体，可先将其添加至文件工具后再进行操作。

  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');}
    • 将字体名称替换为您的 字体名称。
    • 将your_font_file.xxx?替换为文件工具生成的URL。每个文件格式均需重复此操作。 
  1. 在邮件正文代码中，通过内联样式添加自定义字体。 
  2. 点击右上角的“更新”或“发布”按钮使更改生效。 

在CTA中使用自定义字体

在主题中添加自定义字体后，即可将其应用于CTA：

      1. 在 HubSpot 帐户中，导航到营销 > CTA。
      2. 在左上角点击下拉菜单， 选择"CTAs"
      3. 将鼠标悬停在某个CTA上，然后点击操作 > 编辑。 
      4. 在CTA编辑器的左侧面板中，点击设计选项卡。 
      5. 点击样式部分 展开内容。
      6. 点击主字体下拉 菜单并选择自定义字体。 
      7. 继续创建您的CTA。 

 

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

与CTA类似，上传自定义表单文件后，即可在旧版CTA中使用：

      1. 在 HubSpot 帐户中，导航到营销 > CTA。
      2. 将鼠标悬停在某个CTA上，然后点击操作 > 编辑。 
      3. 在右侧面板中点击“高级选项”。 
      4. 在文本框中粘贴此代码：

        font-family: '您的字体名称';
      5. 将字体名称替换为 实际使用的字体名称。
      6. 在右下角点击“下一步”，然后点击 “保存”。 

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

在文件工具中添加自定义字体后，即可将其应用于自定义博客或页面模块。了解如何为自定义编码的邮件模板添加自定义字体。 

  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');}
  1. 将"Your Font Name" 替换为字体名称。
  2. 将your_font_file.xxx?替换为文件工具生成的URL。每种文件格式需重复此操作。
  3. 通过font-family属性创建 CSS 规则以应用自定义字体。 
  4. 点击右上角的发布更改按钮使修改生效。 
这篇文章有帮助吗？
此表单仅供记载反馈。了解如何获取 HubSpot 帮助。

相关内容

目录 /zh-cn/website-and-landing-pages/use-fonts-in-hubspot 菜单

相关内容

New call-to-action