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

在HubSpot中使用字體

上次更新時間: 五月 6, 2024

可与下列任何一种订阅一起使用,除非有说明:

所有產品和版本

HubSpot中可用於內容的字型取決於內容類型和字型類型。 某些預設字型可在所有內容編輯器中使用,而網頁字型(如Google字型)和自訂字型則有其他限制,概述如下: 

內容類型 字型  
  預設字型 Web字體

自訂字型

 
頁面-主題範本 可在佈景主題設定和樣式表中使用  
頁面-編碼範本 可透過樣式表或自訂模組使用 透過樣式表提供  
博客 可透過樣式表或自訂模組使用  
電子郵件 拖放電子郵件編輯器中無法使用部分預設字型 僅適用於自訂編碼的電子郵件範本;大多數電子郵件用戶端不支援 僅適用於自訂編碼的電子郵件範本;大多數電子郵件用戶端不支援  
知識庫 可在範本編輯器的「設計」索引標籤 中找到 不可用  
自訂模組 適用於電子郵件中未使用的自訂模組 適用於電子郵件中未使用的自訂模組  
行動呼籲(舊版)  
CTA  

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

使用預設字型

預設字型可用於所有類型的內容,並適用於大多數平臺和裝置。 

  • 前往你的內容:

    • 網站頁面: 在你的 HubSpot 帳戶中,瀏覽「內容」>「網站頁面」。
    • 登陸頁面: 在你的 HubSpot 帳戶中,瀏覽「內容」>「登陸頁面」。
    • 博客: 在你的 HubSpot 帳戶中,瀏覽「內容」>「部落格」。
    • 知識庫: 在你的 HubSpot 帳戶中,瀏覽「內容」>「知識庫」。
    • 電子郵件: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「行銷郵件」。
  • 將遊標移至內容上方,然後點擊「編輯」。 
  • 在內容編輯器中,按一下RTF文字模組,然後反白顯示要編輯的文字。 
  • 在RTF工具列中,單擊字體下拉菜單並選擇字體。 以下字型提供RTF文字模組:
    • Andale Mono *

    • Arial

    • Book Antiqua *

    • 外送合作夥伴新功能

    • 喬治亞州

    • Helvetica

    • 影響*

    • Lato * *
    • Merriweather * *
    • 摩納哥*
    • 符號*

    • Tahoma

    • 客運大樓*

    • Times New Roman

    • Trebuchet MS

    • 宋體

*無法在拖放電子郵件編輯器中使用。 

* *只能在拖放電子郵件編輯器中作為網頁字型使用。

使用網頁字型

使用初學者範本和主題的頁面,以及知識庫文章和自訂模組的內容編輯器預設提供網頁字型。

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

請注意:無法在RTF編輯器的字型下拉式選單中選擇網頁字型。 

您還可以使用第三方服務,例如Google Fonts ,方法是複製字體的匯入代碼,將其粘貼到內容的樣式表中,然後通過CSS應用字體:

  • 前往fonts.google.com
  • 在搜尋列中輸入字型名稱。 
  • 按一下字型名稱以檢視可供匯入的樣式清單。
  • 在您要匯入的每個樣式旁邊,點擊+選擇此樣式
  • 在右側面板的「在網頁上使用」部分中,選取「@ import」。 
  • 複製字型代碼:
    • 在「在網頁上使用」區段中,複製不帶< style >標籤的@ import代碼。
    • 在CSS規則中指定家庭欄位,複製用於設置CSS規則 的代碼。 
copy-google-font

獲得Google Fonts的代碼後,您可以將字體添加到HubSpot內容中: 

在樣式表中使用Google字體

  • 從Google字體複製字體的@ import代碼
  • 在你的 HubSpot 帳戶中,瀏覽「內容」>「設計管理工具」。
  • Finder中,打開用於內容的樣式表。
  • 將@ import代碼粘貼到樣式表的第1行。 
  • 將用於設置CSS規則的代碼添加到樣式表中的適當選擇器。
  • 點擊右上角的「發佈 變更」,即可接收變更內容。 
add-google-fonts-imported-font-to-stylesheet

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

雖然Apple Mail和其他少數電子郵件用戶端支援Google字型,但廣泛支援的範圍有限,而且最受歡迎的電子郵件用戶端只支援預設的網頁字型。 深入瞭解如何 選擇傳統電子郵件編輯器中使用的預設字型。 
 
自訂編碼電子郵件範本僅適用於訂閱行銷中心 專業 版或企業版 的帳戶 。
 
若要將Google字型新增至自訂編碼電子郵件範本,請按照以下步驟操作: 
  • 從Google字體複製字體的@ import代碼。
  • 在你的 HubSpot 帳戶中,瀏覽「內容」>「設計管理工具」。
  • 尋找工具中,開啟自訂編碼電子郵件範本。
  • 在範本的部分,在< style >標籤之間貼上@ import代碼。 
  • 在電子郵件正文的代碼中,在內嵌樣式中添加自定義字體。 
  • 點擊右上角的「發佈變更」,即可接收變更內容。 

在CTA中使用Google字體(舊版)

  • 複製Google的程式碼,為該字體設定CSS規則
  • 在你的 HubSpot 帳戶中,瀏覽「行銷」>「行動呼籲」。
  • 將遊標懸停在行動呼籲上,然後點擊「操作 」>「編輯」。 
  • 在右側面板中,按一下進階選項。 
  • 在文字方塊中,貼上Google的程式碼,為該字型設定CSS規則。 
  • 按一下右下角的「下一步」。然後按一下「儲存」。

在表單中使用Google字體

  • 在你的 HubSpot 帳戶中,瀏覽「行銷」>「表單」。
  • 將遊標暫留於表單名稱上,然後按一下「動作」>「編輯表單」或「建立新表單」。
  • 在表單編輯器中,按一下「樣式與預覽」索引標籤。 
  • 在左側邊欄選單中,按一下「樣式」部分。
  • 在「文字」部分,按一下「字體系列」下拉式選單,然後選取Google字型。 
  • 在右上角,按一下「更新」或「發佈」,即可接收變更內容。 

在自訂模組中使用Google字型

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


  • 在你的 HubSpot 帳戶中,瀏覽「內容」>「設計管理工具」。
click-add-field
  • 點擊右上角的「發佈變更」,即可接收變更內容。 
  • 前往你的內容:

    • 網站頁面: 在你的 HubSpot 帳戶中,瀏覽「內容」>「網站頁面」。
    • 登陸頁面: 在你的 HubSpot 帳戶中,瀏覽「內容」>「登陸頁面」。
    • 博客: 在你的 HubSpot 帳戶中,瀏覽「內容」>「部落格」。
  • 使用自訂模組將遊標暫留於內容上,然後按一下「編輯」。 
  • 在內容編輯器中,按一下自訂模組。 
  • 在側邊欄編輯器中,按一下「字型」欄位下拉式選單,然後選取Google字型。 

使用自訂字型

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

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

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

上傳自訂字型

  • 前往你的內容:

    • 網站頁面: 在你的 HubSpot 帳戶中,瀏覽「內容」>「網站頁面」。
    • 登陸頁面: 在你的 HubSpot 帳戶中,瀏覽「內容」>「登陸頁面」。
    • 博客: 在你的 HubSpot 帳戶中,瀏覽「內容」>「部落格」。
  • 將遊標移至內容上方,然後點擊「編輯」。 
  • 在內容編輯器中,按一下「編輯」選單,然後選取「佈景主題: [佈景主題名稱]」。
  • 在左側邊欄選單中,按一下字型下拉式選單,然後選擇上傳自訂字型。 
  • 在右側面板的「字體名稱」欄位中輸入字體標籤 。 
  • 單擊選擇字體文件,然後選擇一個或多個字體文件,然後單擊下一步。 
add-a-custom-font-to-theme
  • 擊字體樣式1下拉菜單,然後選擇字體文件使用的樣式 。 您可以將相同的字型檔案設定為多種樣式。

  • 若要新增其他字型樣式,請按一下+新增其他字型樣式,然後新增字型樣式。 每個上傳的字體檔案必須至少有一個相關的樣式。 
  • 新增所有適用的字型樣式後,按一下完成。

編輯自訂字型

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

  • 前往你的內容:

    • 網站頁面: 在你的 HubSpot 帳戶中,瀏覽「內容」>「網站頁面」。
    • 登陸頁面: 在你的 HubSpot 帳戶中,瀏覽「內容」>「登陸頁面」。
    • 博客: 在你的 HubSpot 帳戶中,瀏覽「內容」>「部落格」。
  • 將遊標移至內容上方,然後點擊「編輯」。 
  • 在內容編輯器中,按一下「編輯」選單,然後選取「佈景主題: [佈景主題名稱]」。
  • 在左側邊欄選單中,按一下以展開「字型」部分。
  • 按一下 字型下拉式選單,然後選擇 管理自訂字型。
  • 若要新增字型,請在對話方塊中按一下新增自訂字型 。 
  • 若要編輯字型:
    • 在對話框中,單擊字體旁邊的操作下拉菜單,然後選擇編輯。
    • 要更改字體的名稱,請單擊字體名稱旁邊的編輯,然後輸入新的字體名稱。 
    • 要添加其他字體樣式,請單擊添加其他字體樣式,然後單擊字體樣式下拉菜單並選擇一種樣式。 按一下上傳,然後上傳字型檔案。 
    • 要刪除字體樣式,請單擊字deletededel樣式旁邊的 刪除刪除圖標。 如果沒有列出其他字體樣式,則無法刪除字體樣式。 
    • 按一下儲存。 
  • 要刪除字體,請單擊對話框中的操作下拉菜單,然後選擇刪除。 

請注意:刪除字型會從所有下拉式選單中移除,但字型檔案會保留在檔案工具中,直到刪除為止。 


  • 編輯完字型後,按一下「完成」。

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

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

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

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

  • 在你的 HubSpot 帳戶中,瀏覽「資料庫」>「檔案」。
  • 按一下上傳檔案。 
  • 在電腦的硬碟上,選取字型檔案,然後按一下開啟。 
  • 按一下已上傳字型檔案的名稱。 
  • 在右側面板中,按一下複製網址,以複製檔案所在的網址。 您需要每種檔案格式的字型網址。 

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

檔案工具中新增自訂字型後,您可以在樣式表中引用它。 每種字體樣式(斜體、粗體等)都需要一個單獨的@ font-face規則。 深入瞭解如何在HubSpot中使用樣式表。 

  • 在你的 HubSpot 帳戶中,瀏覽「內容」>「設計管理工具」。
  • Finder中,打開用於內容的樣式表。
  • 對於每種字體樣式:
    • 在樣式表的頂部,貼上以下程式碼: 
@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。 對每種文件格式重復此操作。 
  • 使用font-family屬性建立CSS規則,以套用自訂字型。 
  • 在右上角,按一下「更新」或「發佈」,即可接收變更內容。 
sample-custom-font-in-stylesheet

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

大多數熱門電子郵件用戶端不支援自訂字型。 為了確保讀者有一致的體驗,建議在電子郵件中使用預設網頁字型。 不過,如果您想將自訂字型新增至自訂編碼的電子郵件範本,請在將自訂字型新增至檔案工具後再新增。

  • 在你的 HubSpot 帳戶中,瀏覽「內容」>「設計管理工具」。
  • 尋找工具中,開啟自訂編碼電子郵件範本。
  • 對於每種字體樣式:
    • 在範本的< head >部分,將此代碼貼在< 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。 對每種文件格式重復此操作。 
  • 在電子郵件正文的代碼中,在內嵌樣式中添加自定義字體。 
  • 在右上角,按一下「更新」或「發佈」,即可接收變更內容。 

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

為佈景主題新增自訂字型後,你可以搭配行動呼籲使用:

  • 在你的 HubSpot 帳戶中,瀏覽「行銷」>「行動呼籲」。
  • 點擊左上角的下拉式選單,然後選擇行動呼 籲
  • 將遊標懸停在行動呼籲上,然後點擊「操作 」>「編輯」。 
  • 在行動呼籲編輯器的左側面板中,點擊「設計」索引標籤。 
  • 按一下「樣式」部分以展開。
  • 按一下主要字型下拉式選單,然後選擇自訂字型。 
  • 繼續建立行動呼籲。 

在行動呼籲中使用自訂字型(舊版)

 

與行動呼籲類似,上傳自訂表單檔案後,您可以將其與舊版行動呼籲一起使用:

  • 在你的 HubSpot 帳戶中,瀏覽「行銷」>「行動呼籲」。
  • 將遊標懸停在行動呼籲上,然後點擊「操作 」>「編輯」。 
  • 在右側面板中,按一下進階選項。 
  • 在文字方塊中,貼上此代碼: 

font-family: 'Your Font Name';

  • 將您的字體名稱替換為字體名稱。 
  • 按一下右下角的「下一步」。然後按一下「儲存」。 
set-custom-font-for-cta

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

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

  • 在你的 HubSpot 帳戶中,瀏覽「內容」>「設計管理工具」。
  • Finder中,開啟自訂模組。
  • 在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。 對每種文件格式重復此操作。
  • 使用font-family屬性建立CSS規則,以套用自訂字型。 
  • 點擊右上角的「發佈變更」,即可接收變更內容。 

custom-module-custom-font

這篇文章有幫助嗎?
此表單僅供記載意見回饋。了解如何取得 HubSpot 的協助