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

在 HubSpot 中使用字型

上次更新時間： 2026年2月25日

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

HubSpot 中可用於內容的字型取決於內容類型與字型類型。所有內容編輯器皆提供特定預設字型，而網路字型（如 Google Fonts）與自訂字型則有額外限制，詳見以下說明： 

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

自訂字型

  
頁面 - 主題範本 ✓ 可在主題設定中調整，亦可透過樣式表設定 ✓  
頁面 - 程式碼模板 ✓ 可透過樣式表或自訂模組設定 可透過樣式表取得  
部落格 ✓ 可透過樣式表或自訂模組使用 ✓  
電子郵件 部分預設字型無法在拖放式電子郵件編輯器中使用 僅適用於自訂編碼的電子郵件範本；多數電子郵件客戶端不支援 僅適用於自訂編碼的電子郵件範本；多數電子郵件客戶端不支援此功能  
知識庫 文章編輯器中無法自訂字型 可在主題設定中使用  可在主題設定中使用  
自訂模組 ✓ 可用於未在電子郵件中使用的自訂模組 可用於未用於電子郵件的自訂模組  
行動呼籲按鈕（舊版） ✓ ✓ ✓  
CTA ✓ ✓ ✓  

請注意：並非所有內容類型皆適用於所有帳戶。您可於產品與服務目錄中查閱 HubSpot 帳戶訂閱方案所支援的內容類型。 

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

預設字型適用於所有內容類型，並設計為可於多數平台與裝置上載入。 

  1. 導覽至您的內容：

  2. 點擊 內容 名稱 。 
  3. 在內容編輯器中點擊「富文本模組」，然後選取欲編輯的文字。 
  4. 於「富文字工具列」中點擊「字型」下拉選單並 選擇字型。富文字模組支援以下字型： 
    • 品牌字型

    • Andale Mono*

    • Arial

    • 古體書體*

    • Courier New

    • Georgia

    • Helvetica

    • Impact*

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

    • 符號*

    • Tahoma

    • Terminal*

    • Times New Roman

    • Trebuchet MS

    • Verdana

*拖放式電子郵件編輯器中不可用。 

**僅限拖放式電子郵件編輯器中的網頁字體可用。

使用網頁字型

網頁字型預設於內容編輯器中啟用。

開發人員亦可透過字型欄位將網頁字型新增至主題與自訂模組。採用此方式時，網頁字型並非從第三方服務載入，而是由 HubSpot 直接在內容網域上載入。

請注意：網頁字體無法在富文本編輯器的字體下拉選單中選取。 

您亦可透過複製字體匯入代碼，將其貼入內容樣式表，再透過 CSS 套用字體，使用Google Fonts等第三方服務：

  1. 請前往fonts.google.com。
  2. 在搜尋欄輸入字型名稱。 
  3. 點擊字體名稱以檢視可匯入的樣式清單。
  4. 在欲匯入的每種樣式旁，點擊「+ 選取此樣式」
  5. 在右側面板的「網頁應用」區段中，選擇「@import」。 
  6. 複製字型代碼： 
    • 於「網頁使用」區段中 ，複製不含 <style> 標籤的 @import 程式碼。
    • 在「CSS 規則以指定字型家族」欄位中， 複製設定 CSS規則的代碼。 

取得 Google Fonts 程式碼後，即可將字型新增至 HubSpot 內容： 

於樣式表中使用 Google Fonts

  1. 從 Google Fonts 複製字型的 @import 程式碼。
  2. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  3. 在檔案管理器中開啟您內容使用的樣式表。
  4. 將 @import 程式碼貼至樣式表的第一行。 
  5. 將設定 CSS 規則的程式碼添加至樣式表中相應的選擇器。
  6. 在右上角點擊「發佈 變更」以將修改內容上線。 

在自訂程式碼郵件範本中使用 Google Fonts

儘管 Google Fonts 獲 Apple Mail 及少數郵件客戶端支援，但廣泛相容性仍受限，多數主流郵件客戶端僅支援預設網頁字型。深入瞭解 如何在經典郵件編輯器中選用預設字型。 
 
自訂程式碼電子郵件範本僅限具備 行銷中心 專業版 或 企業版訂閱方案。 
 
若要在自訂程式碼電子郵件範本中加入 Google Font： 
  1. 從 Google Fonts 複製字體的 @import 程式碼。
  2. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  3. 在檔案管理器中開啟自訂編碼的電子郵件範本。
  4. 在模板的<head>區段中，將@import代碼貼至<style>....</style>標籤之間。 
  5. 在郵件正文的程式碼中，以內聯樣式新增自訂字型。 
  6. 點擊右上角的「發佈變更」將修改內容上線。 

在行動呼籲按鈕中使用 Google 字型（舊版）

  1. 複製 Google 提供的字型 CSS 規則設定代碼。
  2. 在你的 HubSpot 帳戶中，瀏覽「行銷」>「行動呼籲」。
  3. 將游標懸停於行動呼籲按鈕上，點擊「動作 」> 「編輯」。 
  4. 於右側面板點擊「進階選項」。 
  5. 在文字方塊中，貼上 Google 提供的設定該字體 CSS 規則的程式碼。 
  6. 點擊右下角的「下一步」，然後點擊「儲存」。

於表單中使用 Google 字型

  1. 在你的 HubSpot 帳戶中，瀏覽「行銷」>「表單」。
  2. 將游標懸停於表單名稱上，點擊「動作」>「編輯表單」或「建立新表單」。
  3. 於表單編輯器中，點擊「樣式與預覽」標籤頁。 
  4. 於左側邊欄選單中點擊「樣式」區段。
  5. 在文字區段中，點擊字型家族下拉式選單並選擇Google Font。 
  6. 於右上角點擊更新或發佈以即時套用變更。 

於自訂模組中使用 Google 字型

請注意：電子郵件模板中的自訂模組無法使用 Google 字型。


  1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  2. 於 左側 檔案瀏覽器 中開啟自訂模組。瞭解如何 建立自訂模組。
  3. 在右側檢查器中，點擊「欄位」區段的 「新增欄位」下拉選單並選擇「字型」。瞭解更多 關於字型欄位的操作方式。

  4. 在右上角點擊發佈變更，將修改內容上線。 

  5. 導覽至您的內容：

  6. 點擊使用自訂模組的內容名稱。 
  7. 於內容編輯器中點擊自訂模組。 
  8. 於側邊欄編輯器中，點擊字型欄位下拉選單並選擇Google Font。 

使用自訂字型

除使用標準網頁字型或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. 在右側面板中，點擊「複製網址」以取得檔案存放位置的網址。您需要取得每種檔案格式對應的字體網址。 

於樣式表中使用自訂字型

將自訂字型新增至檔案工具後，即可於樣式表中引用。每種字型樣式（斜體、粗體等）皆需獨立的@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? 替換為檔案工具中的網址。請針對每種檔案格式重複此步驟。
  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? 替換為檔案工具中的網址。每種檔案格式皆需重複此步驟。 
  1. 在郵件正文的程式碼中，以內聯樣式新增自訂字型。 
  2. 於右上角點擊「更新」或「發佈」以將變更上線。 

於行動呼籲按鈕使用自訂字型

將自訂字型新增至主題後，即可於行動呼籲按鈕中使用：

      1. 在你的 HubSpot 帳戶中，瀏覽「行銷」>「行動呼籲」。
      2. 點擊左上角下拉式選單， 選擇「行動呼籲」
      3. 將游標懸停於行動呼籲按鈕上，點擊「動作」> 「編輯」。 
      4. 在行動呼籲編輯器的左側面板中，點擊設計標籤頁。 
      5. 點擊「樣式」區段 展開內容。
      6. 點擊「主要字型」下拉式 選單並選擇自訂字型。 
      7. 繼續建立您的行動呼籲按鈕。 

 

在行動呼籲按鈕中使用自訂字型（舊版）

與行動呼籲按鈕類似，上傳自訂表單檔案後，即可於舊版行動呼籲按鈕中使用：

      1. 在你的 HubSpot 帳戶中，瀏覽「行銷」>「行動呼籲」。
      2. 將游標懸停於行動呼籲按鈕上，點擊「動作」> 「編輯」。 
      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? 替換為檔案工具中的網址。每種檔案格式皆需重複此步驟。
  3. 透過font-family屬性建立 CSS 規則以套用自訂字型。 
  4. 點擊右上角的「發佈變更」將修改內容上線。 
這篇文章有幫助嗎？
此表單僅供記載意見回饋。了解如何取得 HubSpot 的協助。

相關內容

目錄 /zh-tw/website-and-landing-pages/use-fonts-in-hubspot

相關內容

New call-to-action