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

在 HubSpot 中使用字型

上次更新時間： 2026年5月18日

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

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

。

開始之前

在開始於 HubSpot 中使用字型之前，請先檢視相關要求與注意事項。

需要權限 根據字體的使用位置，使用者可能需要額外的權限：

了解限制與注意事項

  • 並非所有帳戶都提供所有內容類型。如需確認您的訂閱方案中可用的內容類型，請參閱《產品與服務目錄》。
  • 請參閱下表，了解各內容類型可用的字型選項：
內容類型 字型類型  
  預設字型 網頁字型

自訂字型

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

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

HubSpot 內容普遍支援預設字型，但可用的選項以及可套用的位置會因內容類型而異。

  1. 導覽至您的內容：

  2. 點擊您的內容名稱。
  3. 在內容編輯器中，點擊富文本模組，然後選取您要編輯的文字。 
  4. 在富文本工具列中，點擊「字型」下拉式選單並選擇字型。富文本模組中可用的字型如下：

使用網頁字型

部分 HubSpot 內容支援網頁字型，但豐富文字編輯器的「字型」下拉式選單中並未提供此選項。視內容類型而定，網頁字型可透過佈景主題設定、樣式表、自訂模組或編碼範本來套用。 

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

若要使用Google Fonts等第三方服務，請複製字型的匯入代碼，將其貼入內容的樣式表中，然後透過 CSS 套用該字型：

  1. 前往fonts.google.com。
  2. 在搜尋欄中輸入字型名稱。 
  3. 點擊字型名稱以查看可供匯入的樣式清單。
  4. 點擊右上角的「取得字型」。
  5. 點擊右上角的「取得嵌入程式碼」。
  6. 在右側欄中，於「網頁」分頁中選取@import。
  7. 複製@import 程式碼，但請勿包含<style>標籤。
  8. 複製用於設定 CSS 規則的CSS 類別代碼。 

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

在樣式表中使用 Google 字型

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

在

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

Apple Mail 及其他少數電子郵件客戶端支援 Google 字型，但廣泛支援程度有限。大多數主流電子郵件客戶端僅支援預設網頁字型。進一步了解如何在經典電子郵件編輯器中選取預設字型。 

需要訂閱 建立自訂程式碼電子郵件範本需具備 Marketing HubProfessional或Enterprise訂閱方案。


若要將 Google Font 加入自訂程式碼電子郵件範本： 

  1. 從 Google Fonts 複製字體的 @import 程式碼。
  2. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  3. 在檔案瀏覽器中，開啟自訂程式碼電子郵件範本。
  4. 在範本的<head>區段中，將 @import 程式碼貼入<style>....</style>標籤之間。 
  5. 在範本的<body>區段中，透過內嵌樣式新增自訂字型。 
  6. 在右上角點擊「發佈變更」以將您的修改上線。 

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

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

在表單中使用 Google 字型

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

在自訂模組中使用 Google 字型

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

  1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
  2. 在搜尋器中，點擊自訂模組的名稱。瞭解更多關於建立自訂模組的資訊。
  3. 在檢視器中，點擊「欄位」區段的「新增欄位」下拉式選單，並選擇「字型」。瞭解更多關於使用字型欄位的資訊。
  1. 在右上角，點擊「發佈變更」以將您的變更上線。 
  2. 導覽至您的內容：
  3. 使用自訂模組點擊內容名稱。 
  4. 在內容編輯器中，點擊自訂模組。 
  5. 在側邊欄編輯器中，點擊「字型」欄位的下拉式選單，並選取Google Font。 

使用自訂字型

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

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

在佈景主題編輯器中，上傳自訂字型，然後在頁面和文章中使用該字型。支援的字型檔案格式包括：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 Name 」替換為 字型名稱。
    • 將your_font_file.xxx?替換為檔案工具中的URL。針對每種檔案格式重複此步驟。
  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 Name 」替換為 字型名稱。
    • 將your_font_file.xxx?替換為檔案工具中的URL。針對每種檔案格式重複此步驟。 
  1. 在電子郵件正文的程式碼中，透過內嵌樣式加入自訂字型。 
  2. 在右上角點擊「更新」或「發佈」以將變更上線。 

在行動呼籲（CTA）中使用自訂字型

將自訂字型新增至佈景主題後，即可在行動呼籲

（

CTA

）

中使用。

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

在 CTA 中使用自訂字型（

舊版

）

與 CTA 類似，上傳自訂字型檔案後，即可在舊版 CTA 中使用該字型。

  1. 在你的 HubSpot 帳戶中，瀏覽「行銷」>「行動呼籲」。
  2. 將游標懸停在 CTA 上，然後點選「動作」> 「編輯」。 
  3. 在右側面板中，點擊「進階選項」。 
  4. 在文字方塊中貼上此程式碼：

    font-family: 'Your Font Name';
  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');}

    • 請將「Your Font Name 」替換為 字型名稱。
    • 將your_font_file.xxx?替換為檔案工具中的URL。針對每種檔案格式重複此步驟。
  2. 建立包含font-family屬性的 CSS 規則以套用自訂字型。 
  3. 在右上角點擊「發佈變更」以將您的變更上線。 
這篇文章有幫助嗎？
此表單僅供記載意見回饋。了解如何取得 HubSpot 的協助。

相關內容

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

相關內容

New call-to-action