如何在 wordpress 導入google fonts 字型

如何在 WordPress 中使用 Custom Fonts 外掛導入 Google Fonts 字型

當你建立一個 WordPress 網站時,字型的選擇對於網站的外觀和使用者體驗有著重要的影響。Google Fonts 提供了大量免費的字型,讓網站設計師能夠輕鬆挑選適合的字型。然而,如何將 Google Fonts 字型導入 WordPress 中呢?本文將以 Custom Fonts 外掛為例,詳細介紹如何在 WordPress 中導入 Google Fonts 並應用於網站。

為什麼選擇 Custom Fonts 外掛?

Custom Fonts 是一款簡單且功能強大的外掛,專為幫助用戶上傳和管理自定義字型而設計。它支援 Google Fonts、Adobe Fonts(Typekit),甚至是自訂字型檔案(如 .ttf.woff)。通過此外掛,你可以輕鬆將字型整合到 WordPress 主題中,而不需要手動編輯程式碼。以下是使用 Custom Fonts 導入 Google Fonts 的完整步驟:

步驟一:安裝與啟用 Custom Fonts 外掛

  • 登錄你的 WordPress 後台。
  • 在左側導航欄中,點擊 「外掛」 > 「安裝外掛」
  • 在搜尋欄輸入「Custom Fonts」,找到外掛後,點擊 「安裝」,然後點擊 「啟用」
  • 啟用後,外掛將出現在 「外觀」 > 「Custom Fonts」 的選項中。

步驟二:在 Custom Fonts 外掛中添加字型

  • 回到 WordPress 後台,點擊 「外觀」 > 「Custom Fonts」
  • 點擊 「Add New Font」 按鈕,為新字型創建一個條目。
  • 填寫以下欄位:
    • Font Name:輸入字型名稱(例如:Roboto)。
    • Font URL:將剛才從 Google Fonts 複製的嵌入連結粘貼到此欄位。
    • Font Weights and Styles:選擇需要的字重(例如:400、700)及樣式(Regular、Italic)。
  • 點擊 「Save Font」 保存設置。

步驟三:將字型應用到網站

  • 許多現代 WordPress 主題(如 Astra 或 GeneratePress)都支援自定義字型。啟用字型後,你可以直接在主題的字型設置中選擇剛剛添加的字型。例如:

    1. 「外觀」 > 「自訂」(Customize)。
    2. 點擊 「版面設計」 > 「字型」
    3. 在字型選項中,你將看到新添加的字型(如 Roboto),選擇它並保存。

最佳實踐與注意事項

  • 優化網站速度:過多的字型請求可能會影響網站加載速度。建議僅使用必要的字重和樣式。
  • 設置後備字型:在 CSS 中添加後備字型(如 sans-serif),以防 Google Fonts 無法加載。
  • 避免外掛衝突:確保你的主題或其他外掛沒有使用不同的字型管理方法,避免造成樣式衝突。
  •  

其它主題