整合 Google 字體

將 Google 字體新增至您的網站設定中,以便在 Webflow 網站上使用它們。

您可以選擇使用以下方法直接在您的網站上新增額外的字體 字體 在“樣式”面板中進行選擇。選擇 包括字體,這將引導您到 站點配置 > 字體 標籤。從那裡,您可以將 Google 字體嵌入您的網站。

如果您希望使用自訂字體或 Adobe 字體,您可以將它們從各自的部分整合到您的網站中 站點配置 > 字體 標籤。

有價值的資訊: 使用 Google 字型不需要進階網站或工作空間計畫。

關鍵點: Webflow 與 Google 字體的整合依賴 Google 字型 API,該 API 將最終使用者 IP 位址傳輸到 Google 伺服器,可能不符合 GDPR 法規。 了解有關 Google 字體隱私和資料收集的更多信息.

為了避免將最終用戶 IP 位址傳輸到 Google 伺服器,我們建議從 Google 下載字體並將其上傳到 站點配置 > 字體 選項卡 > 自訂字體。進一步探索有關上傳自訂字體的資訊。

在本教程中,您將了解:

  1. 如何定位 Google 字體
  2. 如何將 Google 字體插入您的網站
  3. 如何從您的網站中消除 Google 字體
  4. 如何驗證您的網站是否載入 Google Typefaces API

如何定位 Google 字體

如果您想在做出決定之前探索 Google 字體選擇, 存取 Google 字體 用於即時預覽 Google 的免費網頁字體。

在那裡,您可以過濾字體類別並測試字體的顯示方式,以便在將字體整合到您的 Webflow 網站之前更好地了解各種尺寸和樣式的字體外觀。

如何將 Google 字體插入您的網站

一旦您選擇了字體,您就可以將它們新增至您的 Webflow 網站:

  1. 使用權 站點配置 > 字體 選項卡 > Google 字體 
  2. 選擇您想要在網站上套用的字體 
  3. 選擇您打算在網站上包含的變體(例如樣式、粗體等)、語言和書寫系統 - 請記住您可以稍後進行修改 
  4. 點選 插入字體

您上傳的字體將可以在 風格面板 > 版式 > 字體 下次重新載入 Designer 時。如果您已經在設計器中,則刷新頁面後即可存取上傳的字體。

字體 下拉式選單根據字體來源(例如,Google 字體、自訂字體、Web 字體)組織字體,並在每個來源內按字母順序排列字體。您透過 Google 字體整合整合到網站中的任何字體都將列在下面 Google 字體,以及 Designer 中預設的 Google 字體(例如 Lato、Varela 等)。

有價值的資訊: 設計器中的預設 Google 字體(例如 Lato、Varela 等)不會顯示在 Google 字體清單中 站點配置 > 字體 選項卡 > Google 字體

如何從您的網站中刪除 Google 字體

要從您的網站中刪除 Google 字體,您必須先偵測該 Google 字體的所有出現情況,從您的網站中刪除 Google 字體的所有實例,並最終從網站中刪除 Google 字體。 站點配置 > 字體 選項卡 > Google 字體.

關鍵點: 刪除 Google 字體 站點配置 > 字體 選項卡 > Google 字體 獨自的 將不會 從您的網站中刪除該字體。 Google 字體將繼續出現在您網站發布的 CSS 中,並繼續載入 Google 字體 API 腳本,直到您從網站中根除 Google 字體的所有實例。任何引用已刪除字體的文字元素都將在發布的網站上呈現為 Times New Roman。 

若要找出您網站上所有出現的 Google 字體,請開啟 風格選擇器面板 並輸入您要尋找的字體名稱。這將提供您網站上使用該 Google 字體的所有類別和 HTML 標籤的清單。您可以按一下每個類別旁邊的「清單」符號來查看使用該類別的元素和元件。

一旦您使用 Google 字體識別了類別和/或 HTML 標記,您將需要刪除使用該字體的元素並整理其未使用的類 風格選擇器面板,或修改這些類別和/或 HTML 標籤所使用的字體 風格面板 >版式 > 字體.

從網站中刪除 Google 字體的所有實例後,您可以從網站配置中刪除 Google 字型:

  1. 使用權 站點配置 > 字體 選項卡 > Google 字體 
  2. 點選 擦除 您想要從網站中刪除的 Google 字體旁邊
  3. 重新發布您的網站以實施更改 

如何驗證您的網站是否載入 Google Typefaces API 

刪除所有 Google 字型後,您可能需要確認您的網站不再載入 Google 字型 API。如果您的目標是保證 GDPR 合規性,這一點尤其重要。

若要檢查您的網站是否在 Google Chrome 中載入 Google Typefaces API:

  1. 造訪您發布的網站 
  2. 右鍵單擊頁面上的任意位置並選擇“檢查” 
  3. 訪問 網路 標籤
  4. 重新整理頁面
  5. 檢查 網路 選項卡以找到 網頁字體.js 文件 
Google Chrome 中的網站 justadoginabalaclava.com。右鍵選單打開,“檢查”選項突出顯示。

如果你能發現 網頁字體.js 文件中,您的網站已載入 Google Typefaces API 腳本,您將需要重複上述步驟以從您的網站中刪除所有 Google 字體。如果您沒有遇到 網頁字體.js 在「網路」標籤中檢視檔案時,您的網站未要求或載入 Google Typefaces API。 

開發者工具在 Google Chrome 中在 justadoginabalaclava.com 上開啟。檔案“webfont.js”在開發者工具的“網頁”標籤中突出顯示。
麥伊凡
Ewan Mak 的最新帖子 (看全部)