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

在HubSpot中使用字體

上次更新時間： 2026年8月14日

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

HubSpot中的字體有不同的方式，具體取決於內容類型和字型類型。部分預設字型可在所有內容編輯器中使用。可能需要將網頁字型和自訂字型新增至佈景主題設定、樣式表、自訂模組或編碼範本。

開始之前

開始在HubSpot中使用字型之前，請先查看相關規定和注意事項。

需要權限 使用者可能需要額外的權限，具體取決於字體的使用地點：

了解限制和注意事項

  • 並非所有內容類型都適用於所有帳戶。若要確認可供訂閱的內容類型，請檢 訂閱「 產品 & 服務目錄」。
  • 請查看下表，瞭解每種內容類型可使用哪些字型選項：
內容類型 字型  
  預設字型 Web字體

自訂字型

  
頁面-主題範本 ✓ 可在 佈景主題設定和 樣式表中使用 ✓  
頁面-編碼 範本 ✓ 可透過樣式表或自訂模組使用 透過樣式表提供  
博客 ✓ 可透過樣式表或自訂模組使用 ✓  
電子郵件 拖放電子郵件編輯器中無法使用部分預設字型 僅適用於自訂編碼的電子郵件範本；大多數電子郵件用戶端不支援 僅適用於自訂編碼的電子郵件範本；大多數電子郵件用戶端不支援  
表單 ✓ 可在「 樣 式」索引標籤上的 表單 編輯器 中找到。 透過 佈景主題中的 自訂字型或內嵌表 表單 的頁面或文章樣式表中的自訂字型提供。  
知識庫 無法在文章編輯器中自訂字型 可在 佈景主題設定中使用  可在 佈景主題設定中使用  
自訂模組 ✓ 適用於電子郵件中未使用的自訂模組 適用於電子郵件中未使用的自訂模組  
CTA（舊版） ✓ ✓ ✓  
CTA ✓ ✓ ✓  

在RTF文字模組中使用預設字型

HubSpot內容支援預設字型，但可用的選項以及可以套用的位置取決於內容類型。

  1. 瀏覽至您的內容：

  2. 按一下內容名稱。
  3. 在內容編輯器中，按一下RTF文字模組，然後反白顯示要編輯的文字。 
  4. 在RTF工具列中，單擊字體下拉菜單並選擇 字體。以下字型提供RTF文字模組：
預設字型
品牌 字體 Merriweather
Andale Mono 摩納哥
Arial 符號
Book Antiqua Tahoma
外送合作夥伴新功能 航廈
喬治亞州 Times New Roman
Helvetica Trebuchet MS
影響 宋體
Lato  
預設字型
Arial Merriweather *
外送合作夥伴新功能 Tahoma
喬治亞州 Times New Roman
Helvetica Trebuchet MS
Lato * 宋體
*只能在拖放電子郵件編輯器中作為網頁字型使用。

 

使用網頁字型

部分HubSpot內容支援網頁字型，但無法在RTF編輯器的「 字型 」下拉式選單中使用。根據內容類型，可以在佈景主題設定、樣式表、自訂模組或編碼範本中套用網頁字型。 

開發人員可以使用 字型欄 位，將網頁字型新增至佈景主題和自訂模組。以這種方式新增網頁字型時， HubSpot會直接將字型載入內容的 網域，而不是從第三方服務載入字型。

使用第三方服務，例如 Google Fonts ，方法是複製字體的 匯入 代碼，貼到內容的樣式表中，然後透過 CSS 套用字體：

  1. 前往 fonts.google.com。
  2. 在搜尋列中輸入字型名稱。 
  3. 按一下 字型名稱 以檢視可供 匯入 樣式 清單。
  4. 按一下右上角的「取得字型」。
  5. 按一下右上角的「取得嵌入程式碼」。
  6. 在右欄中，在「 網 頁」索引標籤上選取「 @匯入 」。
  7. 複製不帶 <style> 標籤的 @匯入 代碼 。
  8. 複製 CSS 類別代碼 以設定 CSS 規則。 

在「Google字型」頁面上，會顯示「網頁」索引標籤，以便嵌入Google字型。CSS 類別的嵌入代碼和複製代碼按鈕周圍放置了一個方塊。

  1. 從Google Fonts複製程式碼後，您可以將字型新增至HubSpot內容： 

在樣式表中使用Google字體

  1. 從Google字體複製字體的@匯入 代碼。
  2. 在你的 HubSpot 帳戶中，點擊「更多」，然後前往「內容」 > 「設計管理工具」。如果你的帳戶中沒有顯示「更多」，請直接前往「內容」 > 「設計管理工具」。
  3. 在 Finder中，打開用於內容的樣式表。
  4. 將 @匯入 代碼 粘貼到樣式表的 第1行 。 
  5. 將用於設置 CSS 規則的代碼添加到樣式表中的適當選擇器。
  6. 點擊右上角的「發佈 變更 」，即可接收變更內容。 
在 設計管理工具 中，會顯示 CSS 檔案。在程式碼編輯器中， Google字型 匯入 程式碼位於檔案的頂部，接著是樣式表中適當選擇器的 CSS 規則。

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

Apple Mail和其他一些電子郵件用戶端支援Google Fonts ，但廣泛支援有限。大多數流行的電子郵件用戶端只支援預設的Web字型。深入瞭解如何 選擇傳統電子郵件編輯器中使用的預設字型。 

若要 建立自訂編碼的電子郵件範本，必須 訂閱 行 需要訂閱 Marketing Hub 專 業版或 企業 版。


若要將Google字型新增至自訂編碼電子郵件 範本，請按照以下步驟操作： 

  1. 從Google字體複製字體的@匯入 代碼。
  2. 在你的 HubSpot 帳戶中，點擊「更多」，然後前往「內容」 > 「設計管理工具」。如果你的帳戶中沒有顯示「更多」，請直接前往「內容」 > 「設計管理工具」。
  3. 在 尋找工具中，開啟自訂編碼電子郵件 範本。
  4. 在 範本<head> 區段中，在 <style>....</style> 標籤之間貼上@匯入 代碼。 
  5. 在 範本 <body> 區段中，在 內嵌樣式中新增自訂字型。 
  6. 點擊右上角的「 發佈變更」，即可接收變更內容。 

在 CTA 中使用Google字體（舊版）

  1. 複製Google的程式碼，為該字體設定 CSS 規則。
  2. 在你的 HubSpot 帳戶中，點擊「更多」，然後前往「行銷」 > 「CTA」。如果你的帳戶中沒有顯示「更多」，請直接前往「行銷」 > 「CTA」。
  3. 將遊標懸停在 CTA 上，然後點擊 操作> 編輯。 
  4. 在右側面板中，按一下進階選項。 
  5. 在文字方塊中，貼上Google的程式碼，為該字型設定 CSS 規則。 
  6. 在右下角，按一下「下一步」。然後按一下「 儲存」。

在 表單 單中使用Google字體

  1. 在你的 HubSpot 帳戶中，點擊「更多」，然後前往「行銷」 > 「表單」。如果你的帳戶中沒有顯示「更多」，請直接前往「行銷」 > 「表單」。
  2. 將遊標暫留於 表單 單名稱上，然後按一下 > 「操作」「編輯 表單 單」或「 建立新 表單」。
  3. 在 表單 編輯器中，按一下「 樣式 & 預覽 」索引標籤。 
  4. 在左側邊欄選單中，按一下「樣式」部分。
  5. 在「文字」部分，按一下「字體系列 」下拉式選單，然後選取Google字型。 
  6. 在右上角，按一下「更新」或「發佈 」，即可接收變更內容。 

在自訂模組中使用Google字型

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

  1. 在你的 HubSpot 帳戶中，點擊「更多」，然後前往「內容」 > 「設計管理工具」。如果你的帳戶中沒有顯示「更多」，請直接前往「內容」 > 「設計管理工具」。
  2. 在 尋找工具中，按一下自訂模組 的名稱 。深入瞭解如何 建立自訂模組。
  3. 在 檢測器中，單擊字段部分中的 添加字段下拉菜單，然後選擇 字體。深入瞭解如何 使用字型欄位。
在 設計管理工具 中，會顯示自訂模組的檢查器。在「欄位」部分的「新增欄位」下拉式選單周圍放置了一個方塊。
  1. 點擊右上角的「 發佈變更」，即可接收變更內容。 
  2. 瀏覽至您的內容：
  3. 使用自訂模組按一下內容 名稱 。 
  4. 在內容編輯器中，按一下自訂模組。 
  5. 在側邊欄編輯器中，按一下「字型」欄位下拉式選單，然後選取Google字型。 

使用自訂字型

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

在佈景主題中使用自訂字型

在佈景主題編輯器中，上傳自訂字型，然後在頁面和文章中使用該字型。字體文件支持以下格式： TTF、OTF、WOFF。

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

上傳自訂字型後，頁面、文章或 知識庫 文章便可使用這些字型。

  1. 瀏覽至您的內容：

  2. 按一下內容名稱。 
  3. 在內容編輯器中，按一下「編輯」選單，然後選取「佈景主題： [佈景主題名稱]」。
  4. 在左側邊欄選單中，按一下任何字型下拉式選單 ，然後選擇管理 品牌 字型。
  5. 請按照 此知識庫文章中的步驟 新增或編輯字型。

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

上傳自訂字型後，頁面、文章或 知識庫 文章便可使用這些字型。

  1. 在你的 HubSpot 帳戶中，點擊「更多」，然後前往「服務」 > 「知識庫」。如果你的帳戶中沒有顯示「更多」，請直接前往「服務」 > 「知識庫」。
  2. 點擊右上角的自訂 範本。
  3. 在左側邊欄中，按一下「 設計 」索引標籤。
  4. 在左側邊欄中，單擊 字體樣式。
  5. 按一下任何字型下拉式選單 ，然後選擇管理 品牌 字型。
  6. 請按照 此知識庫文章中的步驟 新增或編輯字型。

編輯自訂字型

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

在樣式表中使用自定義字體

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

請注意：自訂字型僅適用於擁有 設計管理工具 權限的帳戶，且必須使用 CSS。添加自定義字體不會 將字體添加到內容編輯器中的樣式下拉菜單中。

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

  1. 在你的 HubSpot 帳戶中，點擊「更多」，然後前往「內容」 > 「檔案」。如果你的帳戶中沒有顯示「更多」，請直接前往「內容」 > 「檔案」。
  2. 按一下上傳檔案。
  3. 在電腦的硬碟上，選取字型檔案，然後按一下開啟。
  4. 按一下已上傳字型檔案的 名稱 。
  5. 在右側面板中，按一下複製網址 ，以複製檔案所在的網址。您需要每種檔案格式的字型網址。

在樣式表中使用自定義字體

在 文件工具中添加自定義字體後，您可以在樣式表中引用它。每種字體樣式（斜體、粗體等）都需要一個單獨的 @ font-face 規則。深入瞭解如何 在HubSpot中使用樣式表。 

  1. 在你的 HubSpot 帳戶中，點擊「更多」，然後前往「內容」 > 「設計管理工具」。如果你的帳戶中沒有顯示「更多」，請直接前往「內容」 > 「設計管理工具」。
  2. 在 Finder中，打開用於內容的樣式表。
  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. 在右上角，按一下「 更新」或「發佈 」，即可接收變更內容。 

在拖放電子郵件編輯器的電子郵件中使用自訂字型

Apple Mail支援自訂電子郵件字型， Samsung Mail則支援部分字型。Gmail、Outlook或大多數行動網頁用戶端不支援自訂字型。為了確保讀者有一致的體驗，建議在電子郵件中使用預設網頁字型。

不過，如果你想在拖放式電郵編輯器中將自訂字型新增至電郵，請先將自訂字型上載至 品牌套件 並設定備用字型。 

  1. 在 品牌套件 新增自訂字型，然後選擇最接近自訂字型的備用字型。若要避免遞補字型問題，請按照以下步驟操作：  
  2. 在你的 HubSpot 帳戶中，點擊「更多」，然後前往「行銷」 > 「電子郵件」。如果你的帳戶中沒有顯示「更多」，請直接前往「行銷」 > 「電子郵件」。
  3. 按一下行銷電子郵件的名稱，或按一下「建立電子郵件」以 建立新電子郵件。
  4. 若要使用自訂字型來設定文字類型（例如段落或標題）的樣式：
    • 在電子郵件編輯器中，點擊左側邊欄中的 範本 本設計圖示。
    • 要設置在「 文字樣式」部分，單擊下拉菜單，然後在「自定義字體」部分中選擇字體 。

行銷電子郵件編輯器的螢幕擷取畫面。在「文字樣式」區段中，會反白顯示下拉式功能表，以及自訂字體選項的選擇。

  1. 若要在RTF模組中使用自訂字型： 
    • 在電子郵件編輯器中，反白顯示RTF文字模組中的文字。
    • 在RTF編輯器中，按一下字型下拉式選單，將遊標移至自訂字型，然後移至自訂字型並選擇字型粗細。

行銷電子郵件編輯器中富文字模組的螢幕擷取畫面。突出顯示字體下拉菜單，以及HubSpot自定義字體的薄重。

  1. 撰寫電子郵件的內容，然後 在多個用戶端中預覽電子郵件。
  2. 完成並傳送電子郵件。

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

Apple Mail支持自定義字體， Samsung Mail部分支持自定義字體。Gmail、Outlook或大多數行動網頁用戶端不支援自訂字型。為了確保讀者有一致的體驗，建議在電子郵件中使用預設網頁字型。

不過，如果您想將自訂字型新增至自訂編碼的電子郵件 範本 本，請在將 自訂字型新增至檔案工具後再新增。

  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 中使用自訂字型

為佈景主題新增自訂字型後，你可以將其與行動呼籲一起使用。

  1. 在你的 HubSpot 帳戶中，點擊「更多」，然後前往「行銷」 > 「CTA」。如果你的帳戶中沒有顯示「更多」，請直接前往「行銷」 > 「CTA」。
  2. 點擊左上角 的下拉式選單，然後選擇行動呼 籲
  3. 將遊標懸停在行 CTA 上，然後點擊「 操作> 」「編輯」。 
  4. 在行 CTA 編輯器的左側面板中，點擊「 設計 」索引標籤。 
  5. 按一下「 樣式」部分以展開。
  6. 按一下 主要字型下拉式選單，然後選擇 自訂字型。 
  7. 繼續建立 CTA。 

在行 CTA 中使用自訂字型（舊版）

與行動呼籲類似， 上傳自訂字型檔案後，請將其與舊版行動呼籲一起使用。

  1. 在你的 HubSpot 帳戶中，點擊「更多」，然後前往「行銷」 > 「CTA」。如果你的帳戶中沒有顯示「更多」，請直接前往「行銷」 > 「CTA」。
  2. 將遊標懸停在行 CTA 上，然後點擊「 操作> 」「編輯」。 
  3. 在右側面板中，按一下進階選項。 
  4. 在文字方塊中，貼上此代碼：

    font-family: 'Your Font Name';
  5. 將您的字體名稱替換為字體名稱。
  6. 在右下角，按一下「下一步」。然後按一下「 儲存」。

在 表單 單中使用自定義字體

品牌 設定中的自訂字型和 品牌 字型無法直接在表單編輯器中使用。字型選擇器中只會顯示預設字型和Google字型。

若要將自訂或 品牌 字型套用至 表單，必須先在嵌入表單的頁面或 部落格文章 表單 文章層級載入字型：

在自訂模組中使用自訂字型

在 檔案工具中新增自訂字型後，請在自訂網誌或頁面模組中使用。瞭解如何 將自訂字型新增至自訂編碼電子郵件 範本。 

  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');}

    • 將您的字體名稱替換為字體名稱。
    • 將your_font_file.xxx?替換為檔案工具中的URL。對每種文件格式重復此操作。
  2. 使用 font-family 屬性 建立 CSS 規則，以套用自訂字型。 
  3. 點擊右上角的「 發佈變更」，即可接收變更內容。 
這篇文章有幫助嗎？
此表單僅供記載意見回饋。了解如何取得 HubSpot 的協助。
目錄

相關內容

New call-to-action