在 HubSpot 中使用字型

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

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

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

預設字型可在所有類型的內容中使用，並可在大多數平台和裝置上載入。

1. 導覽到您的內容：

   • 網站頁面：
   • 登陸頁面：
   • 網誌：
   • 電子郵件
2. 按一下 內容的 名稱 。
3. 在內容編輯器中，按一下富文字模組，然後反白您要編輯的文字。
4. 在豐富文字工具列中，按一下字型 下拉式功能表，然後選擇字型。以下字型在豐富文字模組中可用：

   • Andale Mono*

   • Arial

   • Book Antiqua*

   • Courier New

   • 喬治亞

   • Helvetica

   • Impact*

   • Lato**
   • Merriweather**

• • 摩納哥*

• • 符號*

  • 塔霍馬

  • 終端*

  • Times New Roman

  • Trebuchet MS

  • Verdana

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

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

使用網頁字型

網頁字型在內容編輯器中預設為可用。

如果您是開發人員，您也可以使用字型欄位將網路字型加入主題和自訂模組。以這些方式使用時，網頁字型不會從第三方服務載入；HubSpot 會直接在內容的網域中載入字型。

請注意：網路字型無法在豐富文字編輯器的字型下拉選單中選擇。

您也可以使用Google Fonts等第三方服務，方法是複製字型的匯入程式碼，貼到內容的樣式表，然後透過 CSS 套用字型：

1. 瀏覽fonts.google.com。
2. 在搜尋列中輸入字型名稱。
3. 按一下字體名稱，以檢視可供匯入的樣式清單。
4. 在您要匯入的每個樣式旁邊，按一下+ 選取此樣式
5. 在右側面板中，在「在網站上使用 」部分中選擇@import 。
6. 複製字型的程式碼：
   • 在「在網站上使用 」部分，複製不含 標籤之間的 @import 代碼。
   • 在電子郵件正文的程式碼中，在內嵌式樣式中加入自訂字型。
   • 在右上方，按一下「發佈變更」以將變更生效。

在 CTA 中使用 Google 字型 (傳統)

1. 複製 Google 為該字型設定 CSS 規則的程式碼。
2. 將滑鼠移至 CTA 上，然後按一下動作 >編輯。
3. 在右側面板中，按一下進階選項。
4. 在文字方塊中，貼上 Google 為該字型設定 CSS 規則的程式碼。
5. 在右下方，按一下下一步。然後按一下儲存。

在表格中使用 Google 字型

1. 將滑鼠移至表單名稱，然後按一下動作 > 編輯表單或建立新表單。
2. 在表單編輯器中，按一下樣式與預覽索引標籤。
3. 在左側功能表中，按一下樣式 部分。
4. 在文字 部分，按一下字型系列下拉式功能表，然後選擇Google 字型。
5. 在右上方，按一下「更新」 或「發佈」，即可啟用您的變更。

在自訂模組中使用 Google 字型

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

1. 在 左側的 搜尋器中 ，開啟自訂模組。進一步瞭解 建立自訂模組。
2. 在 右側的 檢閱器中 ，按一下 欄位區段 中的 新增欄位 下拉式 選單，然後選擇 字型。進一步瞭解 如何使用字型欄位。
   
   
3. 在右上方，按一下Publish changes（發佈變更 ），讓您的變更生效。

4. 導覽到您的內容：

   • 網站頁面：
   • 登陸頁面：
   • 網誌：
5. 按一下使用自訂模組的內容名稱。
6. 在內容編輯器中，按一下自訂模組。
7. 在側邊欄編輯器中，按一下字型欄 下拉式功能表，並選擇Google 字型。

使用自訂字型

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

在主題中使用自訂字型

在主題編輯器中，您可以上傳自訂字型，然後在頁面和文章中使用該字型。字體檔案支援下列格式：ttf、otf、woff。

為頁面或文章上傳自訂字型

一旦您上傳了自訂字型，它們就可以用於頁面、文章或知識庫文章。

1. 導覽到您的內容：

   • 網站頁面：
   • 登陸頁面：
   • 網誌：
2. 按一下內容的名稱。
3. 在內容編輯器中，按一下編輯 功能表，然後選擇主題：[主題名稱]。
4. 在左側欄功能表中，按一下任何字型 下拉功能表，然後選擇管理品牌字型。
5. 依照本知識庫文章中的步驟 ，新增或編輯您的字型。

為知識庫文章上傳自訂字型

一旦您上傳了自訂字型，它們就可以用於頁面、文章或知識庫文章。

1. 在右上方，按一下自訂範本。
2. 在左側欄中，按一下設計索引標籤。
3. 在左側欄中，按一下字體樣式。
4. 按一下任何字型 下拉式功能表 ，然後選擇 管理品牌字型。
5. 依照本知識庫文章中的步驟 ，新增或編輯您的字型。

編輯自訂字型

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

在樣式表中使用自訂字型

除了使用標準網頁字型或Google Fonts 等字型庫之外，您還可以將字型檔案存放在檔案工具中，然後在樣式表中引用它們。

請注意： 自訂字型僅適用於可存取設計管理員的帳戶，並且需要使用 CSS 應用。新增自訂字型將不會把字型加入內容編輯器中的造型下拉選單。

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

1. 按一下上傳檔案。
2. 在電腦硬碟上，選取字型檔案，然後按一下開啟。
3. 按一下上傳的字型檔案名稱。
4. 在右側面板中，按一下複製 URL，以複製檔案所在的 URL。您需要每個檔案格式中字體的 URL。

在樣式表中使用自訂字型

在檔案工具中加入自訂字型後，您就可以在樣式表中引用它。每種字型樣式（斜體、粗體等）都需要單獨的@font-face規則。進一步了解如何在 HubSpot 中使用樣式表。

1. 在搜尋器中，開啟用於內容的樣式表。
2. 對於每種字型樣式
   • 在樣式表的頂端，貼上下列程式碼：

@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 改為字型 名稱 。
     • 將your_font_file.xxx? 改為檔案工具中的URL。重複每種檔案格式。

4. 使用font-family 屬性建立 CSS 規則，套用自訂字型。
5. 在右上方，按一下「更新」 或「發佈」，即可啟用您的變更。

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

大多數常用的電子郵件用戶端都不支援自訂字體。為了確保讀者有一致的體驗，建議您在電子郵件中使用預設的網頁字型。不過，如果您想要在自訂編碼的電子郵件範本中加入自訂字型，您可以在將自訂字型加入檔案工具後再加入。

1. 在搜尋器中，開啟自訂編碼的電子郵件範本。
2. 針對每種字型樣式
   • 在範本的 區段中，將此程式碼貼在 標籤之間：

@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 改為字型 名稱 。
   • 將your_font_file.xxx? 改為檔案工具中的URL。重複每種檔案格式。

4. 在電子郵件正文的程式碼中，以內嵌式樣式新增自訂字型。
5. 在右上方按一下「更新」 或「發佈」，即可啟用您的變更。

在 CTA 中使用自訂字型

在您的主題中加入自訂字型後，您就可以在 CTA 中使用它：

1. 在左上方，按一下下拉式功能表 並選擇CTA
2. 將滑鼠移至 CTA 上，然後按一下動作 >編輯。
3. 在 CTA 編輯器的左側面板中，按一下設計索引標籤。
4. 按一下「樣式 」區段以展開。
5. 按一下主要字型 下拉式功能表，然後選擇您的自訂字型。
6. 繼續建立您的 CTA。

在 CTA 中使用自訂字型 (傳統)

與 CTA 類似，上傳自訂表單檔案後，您可以將其與傳統 CTA 搭配使用：

1. 將滑鼠移至 CTA 上，然後按一下動作 >編輯。
2. 在右側面板中，按一下進階選項。
3. 在文字方塊中，貼上此程式碼：
   
   font-family: 'Your Font Name';
4. 以字體 名稱 取代字體名稱。
5. 在右下方，按一下下一步。然後按一下 儲存。

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

在檔案工具中加入自訂字型後，就可以在自訂部落格或頁面模組中使用。瞭解如何在自訂編碼的電子郵件範本中加入自訂字型。

1. 在搜尋器中，開啟自訂模組。
2. 在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');}

5. 將Your Font Name 改為字型 名稱 。
6. 將your_font_file.xxx? 改為檔案工具中的URL。對每個檔案格式重複。
7. 使用font-family 屬性建立 CSS 規則，以套用自訂字型。
8. 在右上方按一下「發佈變更」，讓您的變更生效。