在HubSpot中使用字體

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

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

使用預設字體

預設字體可用於所有類型的內容，並且設計為在大多數平臺和設備上加載。 

• 瀏覽至您的內容：

  • 網站頁面： 在 HubSpot 帳戶中，進入「行銷」>「網站」>「網站頁面」。
  • 登陸頁面： 在 HubSpot 帳戶中，進入「行銷」>「登陸頁面」。
  • 博客： 在 HubSpot 帳戶中，進入「行銷」>「網站」>「部落格」。
  • 知識庫： 在 HubSpot 帳戶中，進入「服務」>「知識庫」。
  • 郵箱： 在 HubSpot 帳戶中，進入「行銷」>「電子郵件」。
• 將遊標停留在內容上，然後按一下「編輯」。 
• 在內容編輯器中，按一下格式文字模組，然後突出顯示您要編輯的文字。 
• 在富文本工具列中，按一下「字體」下拉式選單，然後選擇字體。 以下字體可用於RTF模組： 

  • Andale Mono *

  • 宋體

  • Book Antiqua *

  • Courier New

  • 格魯吉亞

  • Helvetica

  • 影響*

  • 拉託* *
  • 梅裏威瑟* *

• • 摩納哥*

• • Symbol *

  • 宋體

  • 端子*

  • Times New Roman

  • 投石器MS

  • Verdana

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

* *僅在拖放電子郵件編輯器中作為Web字體提供。

使用Web字體

網頁字體預設可在內容編輯器中使用，適用於使用入門範本和主題的頁面，以及知識庫文章和自訂模組。 如果您是開發人員，您也可以使用字體欄位將Web字體添加到主題和自訂模塊。 當以這些方式使用時， Web字體不會從第三方服務加載，而是HubSpot將直接在頁面加載的域上提供它們。

請注意：無法在富文本編輯器的字體下拉式選單中選擇Web字體。 

您也可以使用第三方服務，例如Google Fonts ，複製字體的匯入代碼，將其粘貼到頁面的樣式表中，然後通過CSS應用字體：

• 前往fonts.google.com。
• 在搜尋列中，輸入字體名稱。 
• 按一下字體名稱以檢視可供匯入的樣式清單。
• 在您要匯入的每個樣式旁邊，按一下+選擇此樣式
• 在右側面板中，在網頁使用區段中選擇@ import 。 
• 複製字體代碼：
  • 在「在網頁上使用」部分中，複製沒有< style >標籤的@ import代碼。
  • 在CSS規則中指定族域，複製用於設定CSS規則 的代碼。 

獲得Google字體代碼後，您可以將字體添加到HubSpot內容： 

• 在樣式表中使用Google字體
• 在自訂編碼電子郵件範本中使用Google字體
• 在CTA中使用Google字體
• 在表單中使用Google字體
• 在自定義模板中使用Google字體

在樣式表中使用Google字體

• 從Google字體複製字體的@ import代碼。
• 在 HubSpot 帳戶中，進入「行銷」>「檔案和範本」>「設計工具」。
• 在Finder中，打開用於內容的樣式表。
• 將@ import代碼粘貼到樣式表的第1行。 
• 將用於設定CSS規則的代碼添加到樣式表中的適當選擇器。 

• 在右上角，按一下「發佈」或「更新」，即可即時執行變更。 

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

• 從Google字體複製字體的@ import代碼。
• 在 HubSpot 帳戶中，進入「行銷」>「檔案和範本」>「設計工具」。
• 在搜尋器中，開啟自訂編碼的電子郵件範本。
• 在範本的< head >部分，在< style >.... </style >標籤之間貼上@ import代碼。 
• 在電子郵件正文的代碼中，在內嵌樣式中添加自訂字體。 
• 在右上角，按一下「更新」或「發佈」，即可即時執行變更。 

在CTA中使用Google字體

• 複製Google為該字體設定CSS規則的代碼。
• 在 HubSpot 帳戶中，進入「行銷」>「商機擷取」>「CTA」。
• 將遊標懸停在CTA上，然後按一下「操作」下拉菜單，然後選擇「編輯」。 
• 在右側面板中，按一下進階選項。 
• 在文本框中，貼上Google為該字體設定CSS規則的代碼。 
• 按一下右下角的「下一步」。然後按一下「儲存」。

  在表單中使用Google字體

• 在 HubSpot 帳戶中，進入「行銷」>「商機擷取 」>「表單」。
• 將遊標停留在表單名稱上，然後按一下「操作」>「編輯表單」或「建立新表單」。
  
• 在表單編輯器中，按一下樣式與預覽標籤。 
• 在左側邊欄選單中，按一下「樣式」部分。
• 在「文字」部分，按一下「字體族」下拉式選單，然後選擇一個Google字體。 
• 在右上角，按一下「更新」或「發佈」，即可即時執行變更。 

在自定義模板中使用Google字體

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

• 在 HubSpot 帳戶中，進入「行銷」>「檔案和範本」>「設計工具」。

• 在左側的搜尋器中，開啟自訂模組。 進一步了解如何建立自訂模組。
• 在右側的檢查員中，按一下「欄位」區段中的「 新增欄位」下拉式選單，然後選擇「字體」。 了解使用字體字段的更多信息。 

• 在右上角，按一下「發佈變更」，即可即時執行變更。 

• 瀏覽至您的內容：

  • 網站頁面： 在 HubSpot 帳戶中，進入「行銷」>「網站」>「網站頁面」。
  • 登陸頁面： 在 HubSpot 帳戶中，進入「行銷」>「登陸頁面」。
  • 博客： 在 HubSpot 帳戶中，進入「行銷」>「網站」>「部落格」。
• 使用自訂模組將遊標停留在內容上，然後按一下「編輯」。 
• 在內容編輯器中，按一下自訂模組。 
• 在側邊欄編輯器中，按一下字體欄位下拉式選單，然後選擇一個Google字體。 

使用自定義字體

作為使用標準Web字體或使用 Google字體等字體庫的替代方案，您可以在檔案工具中託管字體文件，然後在樣式表中引用它們。 

請注意：自定義字體僅在可訪問設計管理器的帳戶中可用，並且需要與CSS一起應用。 自定義字體不會將字體添加到內容編輯器中的樣式下拉菜單中。 

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

• 了解更多
• 按一下上傳檔案。 
• 在電腦的硬碟上，選擇字型檔案，然後按一下[開啟]。 
• 按一下上傳字型檔案的名稱。 
• 在右側面板中，按一下複製URL以複製檔案所在的URL。 您需要每種文件格式的字體的URL。 

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

在「檔案」工具中新增自訂字體後，即可在樣式表中引用。 每種字體樣式（斜體，粗體等）都需要單獨的@ font-face規則。 了解在HubSpot中使用樣式表的更多信息。 

• 在 HubSpot 帳戶中，進入「行銷」>「檔案和範本」>「設計工具」。
• 在Finder中，打開用於內容的樣式表。
• 對於每種字體樣式: 
  • 在樣式表的頂部，貼上以下程式碼： 

@ font-family {font-family: '您的字體名稱'; src: url ('your_font_file.eot?')格式('eot'), url ('your_font_file.woff')格式('woff'), url ('your_font_file.ttf')格式('truetype');}

• • 用字體的名稱替換您的 字體名稱。
  • 將 your_font_file.xxx? 替換為「檔案」工具 中的 URL。 對每種文件格式重復此操作。 
  • 使用font-family屬性創建CSS規則以應用自訂字體。 
• 在右上角，按一下「更新」或「發佈」，即可即時執行變更。 

在自訂編碼的電子郵件模板中使用自訂字體

大多數熱門電子郵件用戶端不支援自訂字體。 為了確保讀者獲得一致的體驗，建議在電子郵件中使用預設的網頁字體。 但是，如果您想將自訂字體新增至自訂編碼的電子郵件範本，您可以在將自訂字體新增至「檔案」工具後進行此操作。

• 在 HubSpot 帳戶中，進入「行銷」>「檔案和範本」>「設計工具」。
• 在搜尋器中，開啟自訂編碼的電子郵件範本。
• 對於每種字體樣式:
  • 在模板的< head >部分，將此代碼粘貼在< style >.... </style >標籤之間： 

@ font-family {font-family: '您的字體名稱'; src: url ('your_font_file.eot?')格式('eot'), url ('your_font_file.woff')格式('woff'), url ('your_font_file.ttf')格式('truetype');}

• • 用字體的名稱替換您的 字體名稱。
  • 將 your_font_file.xxx? 替換為「檔案」工具 中的 URL。 對每種文件格式重復此操作。 
• 在電子郵件正文的代碼中，在內嵌樣式中添加自訂字體。 
• 在右上角，按一下「更新」或「發佈」，即可即時執行變更。 

在CTA中使用自定義字體

在“文件”工具中添加自定義字體後，您可以在CTA中使用它： 

• 在 HubSpot 帳戶中，進入「行銷」>「商機擷取」>「CTA」。
• 將遊標懸停在CTA上，然後按一下「操作」下拉菜單，然後選擇「編輯」。 
• 在右側面板中，按一下進階選項。 
• 在文字方塊中，貼上以下代碼： 

font-family: '您的字體名稱';

• 用字體的名稱替換您的 字體名稱。 
• 按一下右下角的「下一步」。然後按一下「儲存」。 

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

在「檔案」工具中新增自訂字體後，即可在自訂部落格或頁面模組中使用。 了解如何將自訂字體新增至自訂編碼電郵範本。 

• 在 HubSpot 帳戶中，進入「行銷」>「檔案和範本」>「設計工具」。
• 在Finder中，開啟自訂模組。
• 在module.css部分，貼上以下程式碼： 

@ font-family {font-family: '您的字體名稱'; src: url ('your_font_file.eot?')格式('eot'), url ('your_font_file.woff')格式('woff'), url ('your_font_file.ttf')格式('truetype');}

• 用字體的名稱替換您的 字體名稱。
• 將 your_font_file.xxx? 替換為「檔案」工具 中的 URL。 對每種文件格式重復此操作。
• 使用font-family屬性創建CSS規則以應用自訂字體。 

• 在右上角，按一下「發佈變更」，即可即時執行變更。