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

在 HubSpot 中使用字体

上次更新时间： 2025年5月26日

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

HubSpot 中内容可用的字体取决于内容类型和字体类型。某些默认字体在所有内容编辑器中都可用，而网络字体（如 Google 字体）和自定义字体则有额外的限制，概述如下：

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

自定义字体
页面 - 主题模板 ✓ 在主题设置中和通过样式表提供 ✓
页面 - 编码模板 ✓ 通过样式表或自定义模块提供 通过样式表提供
博客 ✓ 通过样式表或自定义模块提供 ✓
电子邮件 某些默认字体在拖放式电子邮件编辑器中不可用 仅适用于自定义编码的电子邮件模板；大多数电子邮件客户端都不支持 仅适用于自定义编码的电子邮件模板；大多数电子邮件客户端不支持
知识库 无法在文章编辑器中自定义字体 在主题设置中可用 在主题设置中可用
自定义模块 ✓ 适用于未在电子邮件中使用的自定义模块 适用于电子邮件中未使用的自定义模块
CTA（传统） ✓ ✓ ✓
CTA ✓ ✓ ✓

请注意：并非所有账户都提供所有内容类型。您的 HubSpot 账户中订阅的可用内容类型可在产品和服务目录中找到。

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

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

  1. 导航至您的内容：

    • 网站页面：在 HubSpot 帐户中，导航到内容 > 网站页面。
    • 登陆页面：在 HubSpot 帐户中，导航到内容 > 登陆页面。
    • 博客：在 HubSpot 帐户中，导航到内容 > 博客。
    • 电子邮件：在您的 HubSpot 账户中，导航至 营销 > 电子邮件。
  2. 单击 内容 名称 。
  3. 在内容编辑器中，单击富文本模块，然后选中要编辑的文本。
  4. 在富文本工具栏中，单击字体 下拉菜单并选择字体。以下字体在富文本模块中可用：

    • Andale Mono*

    • Arial

    • Book Antiqua*

    • Courier New

    • 乔治亚

    • Helvetica

    • Impact*

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

    • 符号*

    • 塔霍马

    • 终端*

    • Times New Roman

    • Trebuchet MS

    • Verdana

*在拖放电子邮件编辑器中不可用。

**仅在拖放式电子邮件编辑器中作为网页字体提供。

使用网络字体

内容编辑器默认提供网络字体。

如果你是开发人员，还可以使用字体字段将网络字体添加到主题和自定义模块中。以这些方式使用时，网络字体不会从第三方服务中加载；HubSpot 会直接在内容域中加载它们。

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

您也可以使用第三方服务，如Google Fonts，方法是复制字体的导入代码，将其粘贴到内容的样式表中，然后通过 CSS 应用字体：

  1. 导航至fonts.google.com。
  2. 在搜索栏中输入字体名称。
  3. 单击字体名称，查看可导入的样式列表。
  4. 在要导入的每个样式旁边，单击+ 选择此样式
  5. 在右侧面板的 "在网页上使用 " 部分选择@import 。
  6. 复制字体代码：
    • 在 "在网页上使用 " 部分，复制不带 <style> 标记的 @import 代码。
    • 在CSS 规则指定族 字段中，复制用于设置 CSS 规则的 代码。

copy-google-font

从 Google Fonts 获取代码后，就可以将字体添加到 HubSpot 内容中：

在样式表中使用 Google 字体

  1. 从 Google Fonts 复制字体的 @import 代码。
  2. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  3. 在查找器中，打开用于内容的样式表。
  4. 将 @import 代码粘贴到样式表的第 1 行。
  5. 在样式表的相应选择器中添加用于设置 CSS 规则的代码。
  6. 在右上角单击 "发布 更改"，即可将更改生效。
add-google-fonts-imported-font-to-stylesheet

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

虽然 Apple Mail 和其他一些电子邮件客户端支持 Google 字体，但支持范围有限，大多数常用电子邮件客户端仅支持默认网络字体。了解更多有关 选择经典电子邮件编辑器中使用的默认字体。
 
自定义编码的电子邮件模板仅适用于带有 营销中心 专业 或 企业订购的账户才可使用。
 
在自定义编码的电子邮件模板中添加 Google 字体：
  1. 从 Google Fonts 复制字体的 @import 代码。
  2. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  3. 在查找器中，打开自定义编码的电子邮件模板。
  4. 在模板的<head> 部分，在<style>....</style> 标记之间粘贴 @import 代码。
  5. 在电子邮件正文的代码中，在内联样式中添加自定义字体。
  6. 在右上角单击 "发布更改"，将您的更改生效。

在 CTA 中使用 Google 字体（传统）

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

在表单中使用 Google 字体

  1. 在 HubSpot 帐户中，导航到营销 > 表单。
  2. 将鼠标悬停在表单名称上，然后单击操作 > 编辑表单或创建新表单。
  3. 在表单编辑器中，单击样式和预览选项卡。
  4. 在左侧边栏菜单中，单击样式 部分。
  5. 在文本 部分，单击字体系列下拉菜单并选择Google 字体。
  6. 在右上角，单击更新 或发布，将更改生效。

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

请注意：Google 字体不适用于电子邮件模板中使用的自定义模块。


  1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
  2. 在 左侧的 查找器中 ，打开自定义模块。了解有关 创建自定义模块的 更多信息 。
  3. 在 右侧的 检查器中 ，单击 " 字段 " 部分的 " 添加字段 " 下拉菜单 ，然后选择 " 字体"。进一步了解如何 使用字体字段。

    click-add-field
  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版本，以确保字体能在所有浏览器上加载。您可以使用字体松鼠转换器工具的 专家 模式生成其他文件格式。

  1. 在 HubSpot 帐户中，导航到内容 > 文件。
  2. 单击上传文件。
  3. 在计算机硬盘上选择字体文件，然后单击打开。
  4. 单击上传字体文件的名称。
  5. 在右侧面板中，单击复制 URL以复制文件所在的 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 Name 替换为字体 名称 。
      • 用文件工具中的URL替换your_font_file.xxx? 。对每种文件格式重复上述步骤。
  1. 使用font-family属性创建 CSS 规则，以应用自定义字体。
  2. 在右上角单击 "更新 " 或"发布"，即可将更改生效。

sample-custom-font-in-stylesheet

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

大多数流行的电子邮件客户端都不支持自定义字体。为确保读者获得一致的体验，建议在电子邮件中使用默认网页字体。不过，如果您想在自定义编码的电子邮件模板中添加自定义字体，可以在将自定义字体添加到文件工具后进行添加。

  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 Name 替换为字体 名称 。
    • 用文件工具中的URL替换your_font_file.xxx? 。对每种文件格式重复上述步骤。
  1. 在电子邮件正文的代码中，在内联样式中添加自定义字体。
  2. 在右上角单击 "更新 " 或"发布"，即可将更改生效。

在 CTA 中使用自定义字体

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

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

 

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

与 CTA 类似，上传自定义表单文件后，您可以将其与传统的 CTA 一起使用：

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

        font-family: 'Your Font Name';
      5. 用 字体名称 替换字体名称。
      6. 在右下角，单击下一步。然后点击 保存。

set-custom-font-for-cta

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

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

  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. 用文件工具中的URL替换your_font_file.xxx? 。对每种文件格式重复上述步骤。
  3. 使用font-family属性创建 CSS 规则，以应用自定义字体。
  4. 在右上角单击 "发布更改"，将更改生效。

custom-module-custom-font
这篇文章有帮助吗？
此表单仅供记载反馈。了解如何获取 HubSpot 帮助。
目录 菜单

相关内容