跳到內容
請注意：：這篇文章的翻譯只是為了方便而提供。譯文透過翻譯軟體自動建立，可能沒有經過校對。因此，這篇文章的英文版本應該是包含最新資訊的管理版本。你可以在這裡存取這些內容。

在 HubSpot 中使用字型

上次更新時間： 2025年5月26日

可搭配下列任何訂閱使用，除非另有註明：

所有產品和版本

HubSpot 中內容可用的字體取決於內容類型和字體類型。某些預設字型可在所有內容編輯器中使用，而網頁字型 (例如 Google Fonts) 和自訂字型則有額外限制，概述如下：

內容類型 字體類型
預設字型 網頁字體

自訂字體
頁面 - 主題範本 ✓ 可在主題設定中和透過樣式表使用 ✓
頁面 - 編碼範本 ✓ 可透過樣式表或自訂模組 可透過樣式表
部落格 ✓ 可透過樣式表或自訂模組 ✓
電子郵件 某些預設字型無法在拖放式電子郵件編輯器中使用 僅適用於自訂編碼的電子郵件範本；大多數電子郵件客戶端不支援 僅適用於自訂編碼的電子郵件範本；大多數電子郵件客戶端不支援
知識庫 字型無法在文章編輯器中自訂 可在主題設定中使用 可在主題設定中使用
自訂模組 ✓ 適用於電子郵件中未使用的自訂模組 可用於電子郵件中未使用的自訂模組
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. 複製字型的程式碼：
    • 在「在網站上使用 」部分，複製不含 標籤之間的 @import 代碼。
    • 在電子郵件正文的程式碼中，在內嵌式樣式中加入自訂字型。
    • 在右上方，按一下「發佈變更」以將變更生效。

在 CTA 中使用 Google 字型 (傳統)

  1. 複製 Google 為該字型設定 CSS 規則的程式碼。
  2. 在你的 HubSpot 帳戶中，瀏覽「行銷」>「行動呼籲」。
  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. 在右上方，按一下Publish changes（發佈變更 ），讓您的變更生效。

  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，以複製檔案所在的 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 改為字型 名稱 。
      • 將your_font_file.xxx? 改為檔案工具中的URL。重複每種檔案格式。
  1. 使用font-family 屬性建立 CSS 規則，套用自訂字型。
  2. 在右上方，按一下「更新」 或「發佈」，即可啟用您的變更。

sample-custom-font-in-stylesheet

在自訂編碼的電子郵件範本中使用自訂字型

大多數常用的電子郵件用戶端都不支援自訂字體。為了確保讀者有一致的體驗，建議您在電子郵件中使用預設的網頁字型。不過，如果您想要在自訂編碼的電子郵件範本中加入自訂字型，您可以在將自訂字型加入檔案工具後再加入。

  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 改為字型 名稱 。
    • 將your_font_file.xxx? 改為檔案工具中的URL。重複每種檔案格式。
  1. 在電子郵件正文的程式碼中，以內嵌式樣式新增自訂字型。
  2. 在右上方按一下「更新」 或「發佈」，即可啟用您的變更。

在 CTA 中使用自訂字型

在您的主題中加入自訂字型後，您就可以在 CTA 中使用它：

      1. 在你的 HubSpot 帳戶中，瀏覽「行銷」>「行動呼籲」。
      2. 在左上方，按一下下拉式功能表 並選擇CTA
      3. 將滑鼠移至 CTA 上，然後按一下動作 >編輯。
      4. 在 CTA 編輯器的左側面板中，按一下設計索引標籤。
      5. 按一下「樣式 」區段以展開。
      6. 按一下主要字型 下拉式功能表，然後選擇您的自訂字型。
      7. 繼續建立您的 CTA。

 

在 CTA 中使用自訂字型 (傳統)

與 CTA 類似，上傳自訂表單檔案後，您可以將其與傳統 CTA 搭配使用：

      1. 在你的 HubSpot 帳戶中，瀏覽「行銷」>「行動呼籲」。
      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. 將your_font_file.xxx? 改為檔案工具中的URL。對每個檔案格式重複。
  3. 使用font-family 屬性建立 CSS 規則，以套用自訂字型。
  4. 在右上方按一下「發佈變更」，讓您的變更生效。

custom-module-custom-font
這篇文章有幫助嗎？
此表單僅供記載意見回饋。了解如何取得 HubSpot 的協助。
目錄

相關內容