註冊
WordPress開發

如何不使用任何外掛在WordPress中新增自定義字型？

WBOLT_COM
1.2k+
0

如何不使用任何外掛在WordPress中新增自定義字型？

排版在網頁設計中發揮著重要作用，影響著網站的外觀和使用者體驗。作為 WordPress 開發人員或有抱負的開發人員，您應該瞭解建立具有視覺吸引力和吸引力的網站的重要性。本文旨在指導大家如何在不使用外掛的情況下為 WordPress 新增自定義字型。我們還將探討在本地載入 Google 字型的好處，以確保效率並符合 GDPR 法規。

在本指南中，我們將為你提供一個清晰的分步過程，告訴你如何在不使用任何外掛的情況下在 WordPress 中新增自定義字型。我們將涵蓋從選擇自定義字型、為 WordPress 準備字型到使用 CSS 啟用字型的所有內容。此外，我們還會討論在本地託管 Google 字型的優勢，並提供常見問題的故障排除技巧。

本文結束時，您將掌握如何增強 WordPress 網站排版的知識，為訪客提供更好的瀏覽體驗。讓我們開始在 WordPress 中以簡單明瞭、內容豐富的方式整合自定義字型的旅程吧。

1. 瞭解自定義字型

自定義字型是現代網頁設計的一個重要元素，它允許網站所有者擺脫標準網路安全字型的限制，為網站注入獨特的個性。與人們熟悉的 Arial 或 Times New Roman 字型不同，自定義字型提供了多種風格和美感，有助於創造令人難忘、具有視覺吸引力的使用者體驗。

為什麼新增自定義字型很重要？

為什麼新增自定義字型很重要？

  • 品牌和形象：定製字型使網站所有者能夠通過排版來強化其品牌形象和個性。通過選擇與其品牌價值產生共鳴的字型，企業可以建立一致且可識別的視覺形象。
  • 增強使用者體驗：字型設計會對網站的可讀性和整體使用者體驗產生重大影響。經過精心挑選的定製字型可以提高內容的可讀性，使使用者更容易接觸到網站資訊。
  • 獨特的視覺吸引力：獨特的字型設計可以增加網站的視覺吸引力，使其從競爭對手中脫穎而出。精心選擇的定製字型能給訪問者留下深刻印象，並有助於獲得更難忘的瀏覽體驗。
  • 差異化和記憶性：在擁擠的數字環境中，使用定製字型可以幫助網站脫穎而出，讓目標受眾更容易記住。正確的字型選擇可以喚起情感、喚起專業感，或與網站的特定利基相匹配。
  • 設計的一致性：在網站的不同部分使用自定義字型可以確保設計語言的一致性。這種一致性有助於保持專業的外觀，並強化整體主題和品牌。
  • 補充網站主題：自定義字型在使排版與網站主題保持一致方面具有靈活性。設計人員可以選擇與內容和設計相協調的字型，從而創造出具有凝聚力和美感的體驗。

谷歌的 GDPR 政策

谷歌字型（Google Fonts）是一種流行的網路字型資源，因其豐富的字型庫和易用性而備受青睞。不過，在將 Google 字型整合到 WordPress 網站時，必須注意《一般資料保護條例》（GDPR）。GDPR 是由歐盟（EU）頒佈的一項資料保護和隱私條例，旨在保護歐盟公民的個人資料和隱私。在使用谷歌字型時，使用者的瀏覽器可能會向谷歌伺服器發出請求，從而有可能向谷歌傳輸 IP 地址等使用者資料。

為遵守 GDPR，建議在伺服器上本地託管 Google 字型。通過在本地託管字型，可以確保使用者資料不會被髮送到外部伺服器，從而更好地保護隱私和遵守資料保護法規。在清楚瞭解自定義字型的意義以及使用 Google 字型等外部資源時遵守 GDPR 的重要性之後，讓我們來探討一下在不依賴第三方外掛的情況下為 WordPress 網站新增自定義字型的逐步過程。

2. 查詢和選擇自定義字型（Google Fonts）

說到獲取各種高質量的自定義字型，Google Fonts 是網頁設計師和開發人員的首選。谷歌字型提供了一個龐大的網路字型庫，這些字型不僅視覺效果吸引人，而且還針對網路效能進行了優化。讓我們來探討一下從 Google 字型中查詢和選擇自定義字型的過程，以提升 WordPress 網站的排版效果。

2.1 訪問 Google 字型

  1. 訪問谷歌字型：首先訪問谷歌字型網站（fonts.google.com）。您將看到一個龐大的字型庫，等待您去探索。
  2. 瀏覽和篩選：谷歌字型允許你按有襯線、無襯線、顯示、手寫等類別瀏覽字型。您還可以根據字型的粗細、傾斜度和寬度過濾字型，找到最適合您網站的字型。
  3. 預覽和比較：點選字型卡，檢視更多詳細資訊，並預覽不同文字大小和樣式的字型。並排比較多種字型，以便做出明智的決定。
  4. 選擇字型：找到與網站設計和內容相匹配的字型後，點選每種字型旁邊的 “加號” 圖示，將它們新增到收藏中。此操作可將所選字型儲存到自定義收藏中，便於日後參考。

2.2 使用 Google 字型

  1. 嵌入谷歌字型：完成字型選擇後，點選頁面底部的 “嵌入” 按鈕。Google Fonts 將生成一個嵌入程式碼，其中包含指向所選字型的連結。
  2. 整合嵌入程式碼：複製提供的嵌入程式碼並將其貼上到 WordPress 主題 HTML 檔案的 <head> 部分。這將確保所選的 Google 字型載入到網站的 CSS 中。
  3. 字型樣式和大小：自定義您希望在網站上使用的字型樣式和大小（Weight）。Google Fonts 提供了特定的 CSS 程式碼片段，您可以將其插入主題的樣式表（style.css）中，以應用所需的字型樣式。

2.3 確保符合 GDPR（可選）

如果 GDPR 合規性是你的網站需要考慮的問題，可以考慮在本地託管 Google 字型，而不是依賴 Google 的伺服器。通過從 Google Fonts 下載字型檔案並將其託管在自己的伺服器上，可以減少向外部伺服器傳輸使用者資料的情況，從而遵守資料保護規定。

有了 Google Fonts 提供的各種網路字型，找到與網站主題和內容相匹配的完美排版就成了一種令人愉悅的體驗。通過深思熟慮地使用 Google Fonts，您可以提升 WordPress 網站的視覺吸引力和可讀性，為訪客提供引人入勝、令人難忘的瀏覽體驗。

3. 為 WordPress 準備字型

要將來自 Google Fonts 的自定義字型整合到 WordPress 網站中，有幾個必要的準備步驟。從下載字型檔案到將其轉換為適當的格式，再到最後將其新增到託管面板（hPanel），請按照本指南的步驟進行操作，以確保整個過程無縫、高效。

3.1 從 Google Fonts 下載字型檔案

  1. 訪問 Google 字型收藏：訪問 Google 字型網站，使用 Google 賬戶登入。導航至 “我的收藏”，檢視之前選擇的字型，或通過新增字型建立新收藏。
  2. 選擇要下載的字型：點選每個字型卡旁邊的 “加號” 圖示，選擇要在網站上使用的自定義字型。這將把所選字型新增到你的收藏中。
  3. 訪問收藏：在收藏中找到所需字型後，點選收藏名稱即可開啟。
  4. 下載字型檔案：點選收藏頁面右上角的下載圖示（向下的箭頭）。包含所選字型檔案的 ZIP 檔案將下載到您的電腦。

3.2 將 TTF 檔案轉換為 WOFF（或 WOFF2）格式

  1. 解壓 ZIP 檔案：解壓下載的檔案，顯示 TTF 格式的字型檔案。
  2. 將 TTF 轉換為 WOFF（或 WOFF2）：為提高網頁效能，建議將 TTF 檔案轉換為 Web Open Font Format (WOFF) 或 Web Open Font Format 2 (WOFF2)。您可以使用各種線上字型轉換工具或桌面應用程式來進行轉換。將轉換後的檔案儲存在一個單獨的資料夾中，以便於訪問。

3.3 在 hPanel 中新增 Google 字型

  • 登入 hPanel：訪問主機提供商提供的主機控制面板（hPanel/cPanel）（注：如果你使用 LNMP 或者 LAMP 或者寶塔面板等管理伺服器，新增 Google 字型與示例步驟可能稍有不同，但大同小異。）。
  • 檔案管理器：在 hPanel 中找到 “File Manager” 部分並開啟。導航到 WordPress 安裝的根目錄，即 “public_html”。
  • 建立新字型資料夾：從根目錄轉到 “wp-content” 資料夾，然後建立一個名為 “custom-fonts”（或任何你喜歡的名稱）的新資料夾來儲存你的自定義字型檔案。
  • 上傳字型檔案：在 “fonts” 資料夾中，上傳之前從 Google Fonts 下載的 TTF 和轉換後的 WOFF（或 WOFF2）字型檔案。

在 hPanel 中新增 Google 字型

  • 建立 include_font.css：在同一資料夾，即 “custom-fonts” 中，建立名為 include_font.css 的 CSS 檔案
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/* Font: Poppins */
/*Regular*/
@font-face {
font-family: "Poppins";
src: local("Poppins-Regular"), local("Poppins-Regular"),
url("Poppins-Regular.ttf") format("truetype"),
url("Poppins-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
/*Bold*/
@font-face {
font-family: "Poppins";
src: local("Poppins-Bold"), local("Poppins-Bold"),
url("Poppins-Bold.ttf") format("truetype"),
url("Poppins-Bold.woff") format("woff");
font-weight: bold;
font-style: normal;
}
/*Black*/
@font-face {
font-family: "Poppins";
src: local("Poppins-Black"), local("Poppins-Black"),
url("Poppins-Black.ttf") format("truetype"),
url("Poppins-Black.woff") format("woff");
font-weight: 900;
font-style: normal;
}
/*Semi-Bold*/
@font-face {
font-family: "Poppins";
src: local("Poppins-SemiBold"), local("Poppins-SemiBold"),
url("Poppins-SemiBold.ttf") format("truetype"),
url("Poppins-SemiBold.woff") format("woff");
font-weight: 600;
font-style: normal;
}
/*Extra-Bold*/
@font-face {
font-family: "Poppins";
src: local("Poppins-ExtraBold"), local("Poppins-ExtraBold"),
url("Poppins-ExtraBold.ttf") format("truetype"),
url("Poppins-ExtraBold.woff") format("woff");
font-weight: 800;
font-style: normal;
}
/*Light*/
@font-face {
font-family: "Poppins";
src: local("Poppins-Light"), local("Poppins-Light"),
url("Poppins-Light.ttf") format("truetype"),
url("Poppins-Light.woff") format("woff");
font-weight: 300;
font-style: normal;
}
/*Medium*/
@font-face {
font-family: "Poppins";
src: local("Poppins-Medium"), local("Poppins-Medium"),
url("Poppins-Medium.ttf") format("truetype"),
url("Poppins-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
}
/*Extra-Light*/
@font-face {
font-family: "Poppins";
src: local("Poppins-ExtraLight"), local("Poppins-ExtraLight"),
url("Poppins-ExtraLight.ttf") format("truetype"),
url("Poppins-ExtraLight.woff") format("woff");
font-weight: 200;
font-style: normal;
}
/*Thin*/
@font-face {
font-family: "Poppins";
src: local("Poppins-Thin"), local("Poppins-Thin"),
url("Poppins-Thin.ttf") format("truetype"),
url("Poppins-Thin.woff") format("woff");
font-weight: 100;
font-style: normal;
}
/*Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-Italic"), local("Poppins-Italic"),
url("Poppins-Italic.ttf") format("truetype"),
url("Poppins-Italic.woff") format("woff");
font-weight: normal;
font-style: italic;
}
/*Medium-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-MediumItalic"), local("Poppins-MediumItalic"),
url("Poppins-MediumItalic.ttf") format("truetype"),
url("Poppins-MediumItalic.woff") format("woff");
font-weight: 500;
font-style: italic;
}
/*Semi-Bold-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-SemiBoldItalic"), local("Poppins-SemiBoldItalic"),
url("Poppins-SemiBoldItalic.ttf") format("truetype"),
url("Poppins-SemiBoldItalic.woff") format("woff");
font-weight: 600;
font-style: italic;
}
/*Bold-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-BoldItalic"), local("Poppins-BoldItalic"),
url("Poppins-BoldItalic.ttf") format("truetype"),
url("Poppins-BoldItalic.woff") format("woff");
font-weight: bold;
font-style: italic;
}
/*Extra-Bold-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-ExtraBoldItalic"), local("Poppins-ExtraBoldItalic"),
url("Poppins-ExtraBoldItalic.ttf") format("truetype"),
url("Poppins-ExtraBoldItalic.woff") format("woff");
font-weight: 800;
font-style: italic;
}
/*Light-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-LightItalic"), local("Poppins-LightItalic"),
url("Poppins-LightItalic.ttf") format("truetype"),
url("Poppins-LightItalic.woff") format("woff");
font-weight: 300;
font-style: italic;
}
/*Extra-Light-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-ExtraLightItalic"), local("Poppins-ExtraLightItalic"),
url("Poppins-ExtraLightItalic.ttf") format("truetype"),
url("Poppins-ExtraLightItalic.woff") format("woff");
font-weight: 200;
font-style: italic;
}
/*Thin-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-ThinItalic"), local("Poppins-ThinItalic"),
url("Poppins-ThinItalic.ttf") format("truetype"),
url("Poppins-ThinItalic.woff") format("woff");
font-weight: 100;
font-style: italic;
}
/*Black-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-BlackItalic"), local("Poppins-BlackItalic"),
url("Poppins-BlackItalic.ttf") format("truetype"),
url("Poppins-BlackItalic.woff") format("woff");
font-weight: 900;
font-style: italic;
}
/* Font: Poppins */ /*Regular*/ @font-face { font-family: "Poppins"; src: local("Poppins-Regular"), local("Poppins-Regular"), url("Poppins-Regular.ttf") format("truetype"), url("Poppins-Regular.woff") format("woff"); font-weight: normal; font-style: normal; } /*Bold*/ @font-face { font-family: "Poppins"; src: local("Poppins-Bold"), local("Poppins-Bold"), url("Poppins-Bold.ttf") format("truetype"), url("Poppins-Bold.woff") format("woff"); font-weight: bold; font-style: normal; } /*Black*/ @font-face { font-family: "Poppins"; src: local("Poppins-Black"), local("Poppins-Black"), url("Poppins-Black.ttf") format("truetype"), url("Poppins-Black.woff") format("woff"); font-weight: 900; font-style: normal; } /*Semi-Bold*/ @font-face { font-family: "Poppins"; src: local("Poppins-SemiBold"), local("Poppins-SemiBold"), url("Poppins-SemiBold.ttf") format("truetype"), url("Poppins-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; } /*Extra-Bold*/ @font-face { font-family: "Poppins"; src: local("Poppins-ExtraBold"), local("Poppins-ExtraBold"), url("Poppins-ExtraBold.ttf") format("truetype"), url("Poppins-ExtraBold.woff") format("woff"); font-weight: 800; font-style: normal; } /*Light*/ @font-face { font-family: "Poppins"; src: local("Poppins-Light"), local("Poppins-Light"), url("Poppins-Light.ttf") format("truetype"), url("Poppins-Light.woff") format("woff"); font-weight: 300; font-style: normal; } /*Medium*/ @font-face { font-family: "Poppins"; src: local("Poppins-Medium"), local("Poppins-Medium"), url("Poppins-Medium.ttf") format("truetype"), url("Poppins-Medium.woff") format("woff"); font-weight: 500; font-style: normal; } /*Extra-Light*/ @font-face { font-family: "Poppins"; src: local("Poppins-ExtraLight"), local("Poppins-ExtraLight"), url("Poppins-ExtraLight.ttf") format("truetype"), url("Poppins-ExtraLight.woff") format("woff"); font-weight: 200; font-style: normal; } /*Thin*/ @font-face { font-family: "Poppins"; src: local("Poppins-Thin"), local("Poppins-Thin"), url("Poppins-Thin.ttf") format("truetype"), url("Poppins-Thin.woff") format("woff"); font-weight: 100; font-style: normal; } /*Italic*/ @font-face { font-family: "Poppins"; src: local("Poppins-Italic"), local("Poppins-Italic"), url("Poppins-Italic.ttf") format("truetype"), url("Poppins-Italic.woff") format("woff"); font-weight: normal; font-style: italic; } /*Medium-Italic*/ @font-face { font-family: "Poppins"; src: local("Poppins-MediumItalic"), local("Poppins-MediumItalic"), url("Poppins-MediumItalic.ttf") format("truetype"), url("Poppins-MediumItalic.woff") format("woff"); font-weight: 500; font-style: italic; } /*Semi-Bold-Italic*/ @font-face { font-family: "Poppins"; src: local("Poppins-SemiBoldItalic"), local("Poppins-SemiBoldItalic"), url("Poppins-SemiBoldItalic.ttf") format("truetype"), url("Poppins-SemiBoldItalic.woff") format("woff"); font-weight: 600; font-style: italic; } /*Bold-Italic*/ @font-face { font-family: "Poppins"; src: local("Poppins-BoldItalic"), local("Poppins-BoldItalic"), url("Poppins-BoldItalic.ttf") format("truetype"), url("Poppins-BoldItalic.woff") format("woff"); font-weight: bold; font-style: italic; } /*Extra-Bold-Italic*/ @font-face { font-family: "Poppins"; src: local("Poppins-ExtraBoldItalic"), local("Poppins-ExtraBoldItalic"), url("Poppins-ExtraBoldItalic.ttf") format("truetype"), url("Poppins-ExtraBoldItalic.woff") format("woff"); font-weight: 800; font-style: italic; } /*Light-Italic*/ @font-face { font-family: "Poppins"; src: local("Poppins-LightItalic"), local("Poppins-LightItalic"), url("Poppins-LightItalic.ttf") format("truetype"), url("Poppins-LightItalic.woff") format("woff"); font-weight: 300; font-style: italic; } /*Extra-Light-Italic*/ @font-face { font-family: "Poppins"; src: local("Poppins-ExtraLightItalic"), local("Poppins-ExtraLightItalic"), url("Poppins-ExtraLightItalic.ttf") format("truetype"), url("Poppins-ExtraLightItalic.woff") format("woff"); font-weight: 200; font-style: italic; } /*Thin-Italic*/ @font-face { font-family: "Poppins"; src: local("Poppins-ThinItalic"), local("Poppins-ThinItalic"), url("Poppins-ThinItalic.ttf") format("truetype"), url("Poppins-ThinItalic.woff") format("woff"); font-weight: 100; font-style: italic; } /*Black-Italic*/ @font-face { font-family: "Poppins"; src: local("Poppins-BlackItalic"), local("Poppins-BlackItalic"), url("Poppins-BlackItalic.ttf") format("truetype"), url("Poppins-BlackItalic.woff") format("woff"); font-weight: 900; font-style: italic; }
/* Font: Poppins */
/*Regular*/
@font-face {
font-family: "Poppins";
src: local("Poppins-Regular"), local("Poppins-Regular"),
url("Poppins-Regular.ttf") format("truetype"),
url("Poppins-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
/*Bold*/
@font-face {
font-family: "Poppins";
src: local("Poppins-Bold"), local("Poppins-Bold"),
url("Poppins-Bold.ttf") format("truetype"),
url("Poppins-Bold.woff") format("woff");
font-weight: bold;
font-style: normal;
}
/*Black*/
@font-face {
font-family: "Poppins";
src: local("Poppins-Black"), local("Poppins-Black"),
url("Poppins-Black.ttf") format("truetype"),
url("Poppins-Black.woff") format("woff");
font-weight: 900;
font-style: normal;
}
/*Semi-Bold*/
@font-face {
font-family: "Poppins";
src: local("Poppins-SemiBold"), local("Poppins-SemiBold"),
url("Poppins-SemiBold.ttf") format("truetype"),
url("Poppins-SemiBold.woff") format("woff");
font-weight: 600;
font-style: normal;
}
/*Extra-Bold*/
@font-face {
font-family: "Poppins";
src: local("Poppins-ExtraBold"), local("Poppins-ExtraBold"),
url("Poppins-ExtraBold.ttf") format("truetype"),
url("Poppins-ExtraBold.woff") format("woff");
font-weight: 800;
font-style: normal;
}
/*Light*/
@font-face {
font-family: "Poppins";
src: local("Poppins-Light"), local("Poppins-Light"),
url("Poppins-Light.ttf") format("truetype"),
url("Poppins-Light.woff") format("woff");
font-weight: 300;
font-style: normal;
}
/*Medium*/
@font-face {
font-family: "Poppins";
src: local("Poppins-Medium"), local("Poppins-Medium"),
url("Poppins-Medium.ttf") format("truetype"),
url("Poppins-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
}
/*Extra-Light*/
@font-face {
font-family: "Poppins";
src: local("Poppins-ExtraLight"), local("Poppins-ExtraLight"),
url("Poppins-ExtraLight.ttf") format("truetype"),
url("Poppins-ExtraLight.woff") format("woff");
font-weight: 200;
font-style: normal;
}
/*Thin*/
@font-face {
font-family: "Poppins";
src: local("Poppins-Thin"), local("Poppins-Thin"),
url("Poppins-Thin.ttf") format("truetype"),
url("Poppins-Thin.woff") format("woff");
font-weight: 100;
font-style: normal;
}
/*Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-Italic"), local("Poppins-Italic"),
url("Poppins-Italic.ttf") format("truetype"),
url("Poppins-Italic.woff") format("woff");
font-weight: normal;
font-style: italic;
}
/*Medium-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-MediumItalic"), local("Poppins-MediumItalic"),
url("Poppins-MediumItalic.ttf") format("truetype"),
url("Poppins-MediumItalic.woff") format("woff");
font-weight: 500;
font-style: italic;
}
/*Semi-Bold-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-SemiBoldItalic"), local("Poppins-SemiBoldItalic"),
url("Poppins-SemiBoldItalic.ttf") format("truetype"),
url("Poppins-SemiBoldItalic.woff") format("woff");
font-weight: 600;
font-style: italic;
}
/*Bold-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-BoldItalic"), local("Poppins-BoldItalic"),
url("Poppins-BoldItalic.ttf") format("truetype"),
url("Poppins-BoldItalic.woff") format("woff");
font-weight: bold;
font-style: italic;
}
/*Extra-Bold-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-ExtraBoldItalic"), local("Poppins-ExtraBoldItalic"),
url("Poppins-ExtraBoldItalic.ttf") format("truetype"),
url("Poppins-ExtraBoldItalic.woff") format("woff");
font-weight: 800;
font-style: italic;
}
/*Light-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-LightItalic"), local("Poppins-LightItalic"),
url("Poppins-LightItalic.ttf") format("truetype"),
url("Poppins-LightItalic.woff") format("woff");
font-weight: 300;
font-style: italic;
}
/*Extra-Light-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-ExtraLightItalic"), local("Poppins-ExtraLightItalic"),
url("Poppins-ExtraLightItalic.ttf") format("truetype"),
url("Poppins-ExtraLightItalic.woff") format("woff");
font-weight: 200;
font-style: italic;
}
/*Thin-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-ThinItalic"), local("Poppins-ThinItalic"),
url("Poppins-ThinItalic.ttf") format("truetype"),
url("Poppins-ThinItalic.woff") format("woff");
font-weight: 100;
font-style: italic;
}
/*Black-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-BlackItalic"), local("Poppins-BlackItalic"),
url("Poppins-BlackItalic.ttf") format("truetype"),
url("Poppins-BlackItalic.woff") format("woff");
font-weight: 900;
font-style: italic;
}

給出的 CSS 程式碼代表 @font-face 規則，它允許網頁開發人員在網站上定義和使用自定義字型。在本例中，定義的自定義字型是 “Poppins”。讓我們分解一下程式碼：

  • @font-face：這是用於定義網頁上使用的自定義字型的 CSS 規則。
  • font-family: "Poppins";： 指定自定義字型系列的名稱，本例中為 “Poppins”。該名稱將用於在整個網站中引用字型。
  • src：指定字型檔案的來源。 local() 函式用於檢查使用者裝置上是否已安裝字型。如果是，將使用本地安裝的版本。隨後的 url() 函式將提供不同格式字型檔案的路徑。
  • format：指定字型檔案的格式。本例中使用了兩種格式： TrueType (TTF) 和 Web Open Font Format (WOFF)。
  • font-weight: normal;：定義 “Poppins” 字型系列與正常文字一起使用時的字型權重。在這種情況下，它被設定為預設字型權重，即 “normal”。
  • font-style: normal;：定義 “Poppins” 字型系列與正常文字一起使用時的字型樣式。這裡，它被設定為預設字型樣式，即 “normal”（非斜體）。

總之，這條 @font-face 規則確保了自定義字型 “Poppins” 的正確定義，並可用於不同 HTML 元素的 CSS 樣式中。有了這種設定，網站開發人員就可以輕鬆地將 “Poppins” 字型應用到網站的各個部分，使其具有獨特的、視覺上吸引人的排版風格。

  • 編輯 Functions.php（可選）：如果您想使用 functions.php 來呼叫自定義字型，請訪問 WordPress 主題的 functions.php 檔案並新增相應程式碼來註冊和呼叫自定義字型。
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function add_custom_fonts() {
wp_enqueue_style( 'my-styles', WP_CONTENT_URL . '/custom-fonts/include_font.css', array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'add_custom_fonts' );
function add_custom_fonts() { wp_enqueue_style( 'my-styles', WP_CONTENT_URL . '/custom-fonts/include_font.css', array(), '1.0.0' ); } add_action( 'wp_enqueue_scripts', 'add_custom_fonts' );
function add_custom_fonts() {
wp_enqueue_style( 'my-styles', WP_CONTENT_URL . '/custom-fonts/include_font.css', array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'add_custom_fonts' );

按照這些步驟，您就成功地將自定義字型整合到了 WordPress 網站中。字型檔案現在已儲存在伺服器上，隨時可以訪問並載入到網站上。下一部分將指導您使用 CSS 啟用這些自定義字型，確保您的網站顯示出所需的排版，以獲得吸引人的使用者體驗。

4. 使用 CSS 啟用字型

現在，您已經通過下載和轉換準備好了自定義字型，是時候使用 CSS 將它們整合到 WordPress 網站中了。有了提供的 “include_font.css” 檔案和 “function.php” 檔案中的相應程式碼，您就可以將自定義字型應用到網站的不同元素中了。

4.1 為特定元素應用自定義字型

要為網站上的特定元素自定義字型樣式，請按照以下步驟操作：

  1. 找到元素：確定要使用自定義字型樣式的 HTML 元素。這可以是標題（h1、h2、h3 等）、段落 (p)、導航選單或任何其他元素。
  2. 新增 CSS 程式碼：進入 WordPress 控制面板，導航至 “外觀”>”自定義”。在 “額外 CSS” 部分，為要修改的元素新增所需的 CSS 程式碼段。
  3. 使用字型系列名稱：在 CSS 程式碼中，指定 font-family 屬性，並使用與 “include_font.css” 檔案中提到的完全相同的字型族名稱。例如，如果你想在標題中使用 “Poppins” 字型，程式碼將如下所示：
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
h1, h2, h3 {
font-family: "Poppins", sans-serif;
}
h1, h2, h3 { font-family: "Poppins", sans-serif; }
h1, h2, h3 {
font-family: "Poppins", sans-serif;
}
  1. 儲存更改：新增 CSS 程式碼後，點選 “釋出” 按鈕儲存更改。現在，自定義字型將應用到整個網站的指定元素中。

4.2 全域性自定義字型樣式

您也可以使用 “*”（星號）選擇器，將自定義字型全域性應用到所有相關元素。這樣可以確保整個網站的一致性。為此，請在 “額外 CSS” 部分新增以下 CSS 程式碼：

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
*{
--fontFamily: "Poppins", sans-serif;
}
*{ --fontFamily: "Poppins", sans-serif; }
*{
--fontFamily: "Poppins", sans-serif;
}

該程式碼將 “Poppins” 字型設定為整個網站正文的預設字型。

4.3 備用字型：在自定義字型無法載入的情況下，必須提供一種後備字型。後備字型應為常用字型，以確保一致的使用者體驗。例如：

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
body {
font-family: "Poppins", sans-serif;
}
body { font-family: "Poppins", sans-serif; }
body {
font-family: "Poppins", sans-serif;
}

在本例中，如果 “Poppins” 字型不可用，瀏覽器將使用預設的無襯線字型。

有了這些 CSS 指南，您就可以靈活地在 WordPress 網站上有選擇性地或全域性性地應用自定義字型。通過為網站的設計和內容選擇完美的自定義字型，您可以盡情發揮創造力，打造獨一無二、引人入勝的使用者體驗。

5. 在本地載入 Google 字型的好處

與依賴外部伺服器載入字型相比，在 WordPress 網站上本地整合 Google 字型有幾個優勢。通過在伺服器上託管字型檔案，而不是從谷歌伺服器上獲取字型檔案，你可以享受到以下好處：

  1. 提高頁面載入速度：從外部伺服器載入字型可能會帶來延遲，尤其是在伺服器流量較大或出現網路問題的情況下。在本地託管字型可以確保更快的載入速度，因為字型檔案是直接從你自己的伺服器上獲取的，從而減少了對外部資源的依賴。
  2. 增強網站效能：優化網站效能對於提供流暢的使用者體驗至關重要。通過使用本地字型，可以減少載入網站所需的外部 HTTP 請求的數量，從而最大限度地減少潛在瓶頸並提高整體效能。
  3. 提高隱私和安全性：在外部使用谷歌字型時，訪問者的瀏覽器可能需要與谷歌伺服器通訊，從而可能共享使用者資料（如 IP 地址）。而在本地託管字型則可以避免這種資料傳輸，從而更好地保護使用者隱私並提高安全性。
  4. 遵守 GDPR：如前所述，歐盟的《通用資料保護條例》（GDPR）旨在保護使用者資料和隱私。通過在本地載入 Google Fonts，您可以遵守 GDPR 要求，因為使用者資料不會傳輸到外部伺服器。
  5. 離線訪問：將 Google 字型託管到本地，即使訪問者處於離線狀態或遇到網路連線問題，也能訪問您的網站。這種離線訪問對於需要在沒有網際網路連線的情況下檢視網站的使用者來說非常有價值。
  6. 更好的控制和定製：通過本地託管，您可以完全控制字型檔案，並在需要時輕鬆進行修改。此外，您還可以將各種字型重量和樣式合併到一個字型檔案中，從而減少請求次數，進一步優化效能。
  7. 最大限度地減少對外部伺服器的依賴：通過避免對外部伺服器的依賴，您可以降低潛在的字型服務中斷或谷歌基礎架構變更的風險，這些變更可能會影響字型的可用性或載入時間。
  8. 減少 CORS 問題：從外部域載入資源時可能會出現跨源資源共享（CORS）問題，從而可能導致某些瀏覽器出現問題。在本地託管 Google 字型有助於避免 CORS 相關問題。
  9. 面向未來：在本地載入 Google 字型可面向未來，使您的網站免受 Google 字型服務可能發生的變化或中斷的影響。您可以保留對字型檔案的控制權，即使 Google 對字型庫進行了修改，也能確保排版的一致性。

以下是本地載入 Google 字型與不本地載入 Google 字型的比較表：

引數 本地載入 Google 字型 不在本地載入 Google 字型
頁面載入速度 更快 較慢
網站效能 增強型 可能會受到影響
隱私與安全 提高隱私保護  可能將資料傳輸到外部伺服器，可能會引發隱私問題
遵守 GDPR 符合要求 可能在遵守資料保護法規方面帶來挑戰
離線訪問 可用 不可用
控制和自定義 完全控制字型檔案和自定義選項  有限的自定義和控制，依賴於外部伺服器
對外部伺服器的依賴 風險降低  出現影響字型可用性的中斷或變更的風險較高
CORS 問題 避免 從外部域載入資源時可能出現的 CORS 相關問題
面向未來 確保 易受外部字型服務潛在變化或中斷的影響

總之，本地載入 Google 字型可以加快頁面載入速度，提高網站效能，增加隱私和安全性，符合 GDPR 要求，實現離線訪問，提供更好的控制和自定義選項，最大限度地減少對外部伺服器的依賴，避免 CORS 問題，並提高面向未來的能力。另一方面，不在本地載入谷歌字型可能會導致載入時間變慢、潛在的隱私問題、遵守資料保護法規方面的挑戰、有限的定製選項、對外部伺服器的依賴、可能的 CORS 相關問題以及易受外部字型服務變化的影響。

6. 排除常見問題

雖然在 WordPress 網站上新增自定義字型可以大大增強網站的視覺吸引力和使用者體驗，但在此過程中遇到一些問題並不少見。在此，我們將討論一些常見問題，並提供故障排除技巧，以幫助您解決這些問題。

6.1 字型不顯示

問題：您的自定義字型在網站上無法顯示。

故障排除技巧：

  1. 檢查檔案路徑：檢查 “include_font.css” 中的字型檔案路徑和 “fonts” 資料夾中的字型檔案位置是否正確。
  2. 檔案許可權：確保字型檔案具有適當的讀取許可權（通常為 644），以便網路伺服器可以訪問。
  3. 字型名稱匹配：確保 @font-face 規則和 CSS 程式碼中的字型族名稱與 “include_font.css” 檔案中指定的名稱一致。
  4. 字型格式相容性：確認大多數網路瀏覽器都支援所選字型格式（TTF 和 WOFF）。

6.2 頁面載入速度慢

問題：整合自定義字型會影響網站的載入速度。

故障排除技巧：

  1. 字型子集：通過建立字型子集，只使用所需的字元來減小字型檔案大小。如果只需要特定字元或語言字形，這一點尤其有用。
  2. 壓縮字型檔案：使用 Gzip 等工具壓縮字型檔案，以儘量減小檔案大小。
  3. 優化字型使用：限制載入字型樣式和權重的數量，以減少 HTTP 請求。

6.3 跨瀏覽器相容性

問題：自定義字型在不同網路瀏覽器上的顯示效果不同或完全不顯示。

故障排除技巧：

  1. 瀏覽器支援：確認所有目標瀏覽器都支援所選字型格式（TTF 和 WOFF）。
  2. 備用字型：始終在 CSS 程式碼中提供後備字型選項，以確保在自定義字型無法載入時能正確呈現。

6.4 CORS 問題

問題：從外部域載入字型資源時，遇到跨源資源共享 (CORS) 問題。

故障排除技巧：

  1. 本地託管：在本地託管 Google 字型，以避免 CORS 相關問題，並減少對外部伺服器的依賴。

6.5 混合內容錯誤（針對 HTTPS 網站）

問題：如果您的網站使用 HTTPS，但字型檔案是通過 HTTP 載入的，則可能會出現混合內容錯誤。

故障排除技巧：

  1. 使用 HTTPS URL：確保對包括字型檔案在內的所有資源使用 HTTPS URL，以保持安全連線。

6.6 字型許可和版權

問題：有關字型許可和版權的法律問題。

故障排除技巧：

  1. 檢查許可：確保使用獲得網路使用許可並符合版權規定的自定義字型。
  2. 閱讀許可條款：檢視自定義字型的許可條款和條件，以避免任何法律糾紛。

通過解決這些常見問題並應用所提供的故障排除技巧，您可以確保將自定義字型順利整合到 WordPress 網站中，從而為訪問者提供具有視覺吸引力的無縫使用者體驗。

小結

自定義字型在提升 WordPress 網站的視覺吸引力和使用者體驗方面起著至關重要的作用。通過在本地新增自定義字型，您可以提高頁面載入速度、增強效能，並在維護使用者隱私的同時確保符合 GDPR 要求。本地託管提供了更多的控制和自定義選項，減少了 CORS 問題，並使您的網站免受潛在字型服務變更的影響。如果遇到問題，請按照我們的故障排除技巧克服常見的障礙，享受為網站建立獨特迷人的排版所帶來的好處。歡迎使用自定義字型，讓您的網站與眾不同、令人難忘。

WordPress字型 字型CSS 谷歌字型
評論收藏微海報
分享
分享到

相關的

評論留言

馬上學習

文章目錄

  • 1. 瞭解自定義字型
  • 為什麼新增自定義字型很重要？
  • 谷歌的 GDPR 政策
  • 2. 查詢和選擇自定義字型（Google Fonts）
  • 3. 為 WordPress 準備字型
  • 4. 使用 CSS 啟用字型
  • 5. 在本地載入 Google 字型的好處
  • 6. 排除常見問題
  • 小結