在HubSpot中使用字體
上次更新時間: 五月 22, 2023
HubSpot中可用於內容的字體取決於內容類型和字體類型。 某些預設字體可在所有內容編輯器中使用,而網頁字體(如Google字體)和自訂字體則有其他限制,概述如下:
內容類型 | 字體 | |||
Default fonts | Web字體 | 自定義字體 | ||
頁面-入門模板 | ✓ | 可在內容編輯器的「設計」標籤頁上使用 | 不可用 | |
Page - theme templates | ✓ | 可在主題設定和樣式表中使用 | 通過樣式表可用 | |
頁面-編碼模板 | ✓ | 可透過樣式表或自訂模組取得 | 通過樣式表可用 | |
博客 | ✓ | 可透過樣式表或自訂模組取得 | 通過樣式表可用 | |
郵箱 | 拖放電子郵件編輯器中不提供某些預設字體 | 僅適用於自訂編碼的電子郵件範本;大多數電子郵件客戶端不支援 | 僅適用於自訂編碼的電子郵件範本;大多數電子郵件客戶端不支援 | |
知識庫 | ✓ | 可在範本編輯器的「設計」標籤頁 上使用 | 不可用 | |
自定義模板 | ✓ | 適用於電子郵件中未使用的自訂模組 | 適用於電子郵件中未使用的自訂模組 | |
CTA | ✓ | ✓ | ✓ |
請注意:並非所有帳戶都提供所有內容類型。您可以在產品和服務目錄中找到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字體複製字體的@ 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規則以應用自訂字體。
- 在右上角,按一下「發佈變更」,即可即時執行變更。
相關內容
-
匯出內容和資料
了解如何從帳戶匯出HubSpot內容和資料,例如頁面、聯絡人和檔案。 請注意:沒有辦法合併HubSpot帳戶之間的所有數據。 在帳戶之間移動資產的最佳方法是從HubSpot帳戶匯出數據,然後匯入物件和...
知識庫 -
將影片新增至您的HubSpot內容
透過HubSpot影片,您可以上傳影片至檔案工具,然後將影片新增至頁面、行銷電子郵件、部落格文章和知識庫文章。 您可以將HubSpot影片插入影片模組中的拖放行銷電子郵件,並在頁面上拖放區域...
知識庫 -
將Google Analytics (分析)與HubSpot內容整合
當您將Google Analytics (分析)與HubSpot整合時,您的Google Analytics (分析)帳戶會收集HubSpot網站訪客的資料。 有兩種方法可以將Google...
知識庫