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

在 HubSpot 中使用字型

上次更新時間： 三月 24, 2025

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

所有產品和版本

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

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

自訂字型
頁面 - 主題範本 ✓ 可在主題設定中和透過樣式表使用 ✓
頁面 - 編碼範本 ✓ 可透過樣式表或自訂模組提供 可透過樣式表使用
部落格 ✓ 可透過樣式表或自訂模組提供 ✓
電子郵件 某些預設字型無法在拖放式電子郵件編輯器中使用 僅適用於自訂編碼的電子郵件範本；大多數電子郵件客戶端不支援 僅適用於自訂編碼的電子郵件範本；大多數電子郵件客戶端不支援
知識庫 字型無法在文章編輯器中自訂 可在主題設定中使用 可在主題設定中使用
自訂模組 ✓ 可用於電子郵件中未使用的自訂模組 可用於電子郵件中未使用的自訂模組
CTA (傳統) ✓ ✓ ✓
CTA ✓ ✓ ✓

請注意：並非所有帳戶都提供所有內容類型。您的 HubSpot 帳戶中訂閱可用的內容類型可在產品和服務目錄中找到。

在豐富文字模組中使用預設字型

預設字型可在所有類型的內容中使用，並可在大多數平台和裝置上載入。

  • 導覽到您的內容：

    • 網站頁面：在你的 HubSpot 帳戶中，瀏覽「內容」>「網站頁面」。
    • 登陸頁面：在你的 HubSpot 帳戶中，瀏覽「內容」>「登陸頁面」。
    • 部落格：在你的 HubSpot 帳戶中，瀏覽「內容」>「部落格」。
    • 電子郵件：在你的 HubSpot 帳戶中，瀏覽「行銷」>「電子郵件」。
  • 按一下內容的名稱。
  • 在內容編輯器中，按一下富文字模組，然後反白您要編輯的文字。
  • 在豐富文字工具列中，按一下字型 下拉式功能表，然後選擇字型。下列字型在豐富文字模組中可用：

    • Andale Mono*

    • Arial

    • Book Antiqua*

    • Courier New

    • 喬治亞

    • Helvetica

    • Impact*

    • Lato**
    • Merriweather**
    • 摩納哥*

    • 符號*

    • Tahoma

    • 終端*

    • 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 上，然後按一下動作 >編輯。
  • 在右側面板中，按一下進階選項。
  • 在文字方塊中，貼上 Google 為該字型設定 CSS 規則的程式碼。
  • 在右下方，按一下下一步。然後按一下儲存。

在表格中使用 Google 字型

  • 在你的 HubSpot 帳戶中，瀏覽「行銷」>「表單」。
  • 將滑鼠移至表格名稱，然後按一下動作 > 編輯表格或建立新表格。
  • 在表單編輯器中，按一下樣式與預覽索引標籤。
  • 在左側功能表中，按一下樣式區 。
  • 在文字 部分，按一下字型系列下拉式功能表，然後選擇Google 字型。
  • 在右上方，按一下「更新」 或「發佈」，即可啟用您的變更。

在自訂模組中使用 Google 字型

請注意：電子郵件範本中使用的自訂模組不可使用 Google 字型。


  • 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。

  • 在右上方，按一下「發佈變更 」，即可執行您的變更。

  • 導覽到您的內容：

    • 網站頁面：在你的 HubSpot 帳戶中，瀏覽「內容」>「網站頁面」。
    • 登陸頁面：在你的 HubSpot 帳戶中，瀏覽「內容」>「登陸頁面」。
    • 部落格：在你的 HubSpot 帳戶中，瀏覽「內容」>「部落格」。
  • 按一下使用自訂模組的內容名稱。
  • 在內容編輯器中，按一下自訂模組。
  • 在側邊欄編輯器中，按一下字型欄 下拉式功能表，然後選擇Google 字型。

使用自訂字型

除了使用標準網頁字型或Google Fonts 等字型庫之外，您還可以上傳字型檔案，然後在主題中使用它們，或在樣式表中引用它們。

在主題中使用自訂字型

在主題編輯器中，您可以上傳自訂字型，然後在頁面和文章中使用該字型。字體檔案支援下列格式：ttf、otf、woff。

為頁面或文章上傳自訂字型

一旦您上傳了自訂字型，它們就可以用於頁面、文章或知識庫文章。

  • 導覽到您的內容：

    • 網站頁面：在你的 HubSpot 帳戶中，瀏覽「內容」>「網站頁面」。
    • 登陸頁面：在你的 HubSpot 帳戶中，瀏覽「內容」>「登陸頁面」。
    • 部落格：在你的 HubSpot 帳戶中，瀏覽「內容」>「部落格」。
  • 按一下內容的名稱。
  • 在內容編輯器中，按一下「編輯 」功能表，然後選擇主題：[主題名稱]。
  • 在左側功能表中，按一下字型 下拉功能表，然後選擇上傳自訂字型。
  • 在右側面板中，在字型名稱 欄位中輸入字型的標籤 。
  • 按一下Choose font files（選擇字型檔案）並選擇一個或多個字型檔案，然後按一下Next（下一步）。

  • 按一下字型 樣式 1 下拉式功能表，然後選擇您的字型 檔案所使用的樣式 。每個樣式都必須使用單獨的字型檔案。
  • 若要新增其他字型樣式，請按一下+ 新增另一種字型樣式，然後再新增您的字型樣式。每個上傳的字型檔案必須至少有一個相關的樣式。
  • 新增所有適用的字型樣式後，按一下完成。

為知識庫文章上傳自訂字型

一旦您上傳了自訂字型，它們就可以用於頁面、文章或知識庫文章。

  • 在你的 HubSpot 帳戶中，瀏覽「內容」>「知識庫」。
  • 在右上方，按一下組態 下拉式功能表，然後選擇主題。
  • 在主題編輯器中，按一下側邊欄編輯器中的Typography 。
  • 按一下字型下拉式功能表，然後上 傳自訂字型。如果您已新增自訂字型，請按一下管理自訂字型。
  • 在右側面板中，在字型名稱 欄位中輸入字型的標籤 。
  • 按一下Choose font files（選擇字型檔案）並選擇一個或多個字型檔案，然後按一下Next（下一步）。


  • 按一下字型樣式 1 下拉式功能表，然後選擇您的字型檔案所使用的樣式。每個樣式都必須使用單獨的字型檔案。
  • 若要新增其他字型樣式，請按一下+ 新增另一種字型樣式，然後再新增您的字型樣式。每個上傳的字型檔案必須至少有一個相關的樣式。
  • 新增所有適用的字型樣式後，按一下完成。

編輯自訂字型

在主題編輯器中上傳自訂字型後，您可以上傳其他字型、使用其他字型樣式自訂現有字型，或刪除字型。

  • 導覽到您的內容：

    • 網站頁面：在你的 HubSpot 帳戶中，瀏覽「內容」>「網站頁面」。
    • 登陸頁面：在你的 HubSpot 帳戶中，瀏覽「內容」>「登陸頁面」。
    • 部落格：在你的 HubSpot 帳戶中，瀏覽「內容」>「部落格」。
  • 按一下內容的名稱。
  • 在內容編輯器中，按一下「編輯 」功能表，然後選擇主題：[主題名稱]。
  • 在左側功能表中，按一下以展開字型 部分。
  • 按一下 字型 下拉式功能表 ，然後選擇管理自訂字型。
  • 若要新增字型，請按一下對話方塊中的新增自訂字型 。
  • 若要編輯字型：
    • 在對話方塊中，按一下字體旁邊的動作 下拉式功能表，然後選擇編輯。
    • 若要變更字型名稱，請按一下字型名稱旁邊的編輯，然後輸入新的字型名稱。
    • 若要新增其他字型樣式，請按一下新增另一種字型樣式，然後按一下字型 樣式下拉式 功能表，並選取一種樣式。按一下上傳，然後上傳字型檔案。
    • 若要刪除字型樣式，請按一下字型樣式旁邊的deletededel  刪除圖示。如果沒有列出其他字型樣式，則無法刪除字型樣式。
    • 按一下儲存。
  • 若要刪除字型，請按一下對話方塊中的動作下拉式功能表，然後選擇刪除。

請注意：刪除字型會將其從所有下拉式功能表中移除，但字型檔案會保留在檔案工具中，直到刪除為止。


  • 完成編輯字型後，按一下完成。

在樣式表中使用自訂字型

除了使用標準網頁字型或Google Fonts 等字型庫之外，您還可以將字型檔案存放在檔案工具中，然後在樣式表中引用它們。

請注意： 自訂字型僅適用於可存取設計管理員的帳戶，並且需要使用 CSS 應用。新增自訂字型將不會把字型加入內容編輯器中的造型下拉選單。

要在內容中使用字型，請上傳字型檔案到檔案工具。建議至少上傳.woff、.ttf 和 .eot版本的字型，以確保您的字型能在所有瀏覽器上載入。您可以使用Font Squirrel 轉換器工具的專家 模式來產生其他檔案格式。

  • 在你的 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');}
    • 用字體名 稱 取代Your Font Name 。
    • 將your_font_file.xxx? 改為檔案工具中的URL。重複每個檔案格式。
  • 使用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');}
    • 用字體名 稱 取代Your Font Name 。
    • 將your_font_file.xxx? 改為檔案工具中的URL。重複每個檔案格式。
  • 在電子郵件正文的程式碼中，以內嵌式樣式加入自訂字型。
  • 在右上方，按一下「更新」 或「發佈」，即可啟用您的變更。

在 CTA 中使用自訂字型

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

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

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

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

  • 在你的 HubSpot 帳戶中，瀏覽「行銷」>「行動呼籲」。
  • 將滑鼠移至 CTA 上，然後按一下動作 >編輯。
  • 在右側面板中，按一下進階選項。
  • 在文字方塊中，貼上此代碼：

font-family: 'Your Font Name';

  • 用字體名 稱 取代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');}
  • 用字體名 稱 取代Your Font Name 。
  • 將your_font_file.xxx? 改為檔案工具中的URL。重複每個檔案格式。
  • 使用font-family 屬性建立 CSS 規則，以套用自訂字型。
  • 在右上方，按一下「發佈變更」，即可執行您的變更。
這篇文章有幫助嗎？
此表單僅供記載意見回饋。了解如何取得 HubSpot 的協助。

相關內容