如何在 WordPress 中新增自訂字型
最後更新時間：2024 年 4 月 26 日
您想在 WordPress 中新增自訂字型嗎？自訂字型讓您可以在您的網站上使用美麗的不同字型組合來改善排版和使用者體驗。
除了外觀好看，自訂字型還能幫助您提高可讀性、建立品牌形象，並增加使用者在您 WordPress 網站上的停留時間。
在本文中，我們將展示如何使用 Google Fonts、TypeKit 以及 CSS3 @font-face 方法來新增自訂字型。
注意：載入過多的字型可能會減慢您的網站速度。我們建議選擇兩種字型並在整個網站中使用。我們也會展示如何正確地載入它們而不使網站變慢。
如何找到可在 WordPress 中使用的自訂字型
字型以前很貴，但現在不再如此。有許多地方可以找到優秀的免費網頁字型，如 Google Fonts、Adobe Fonts（前身為 Typekit）、FontSquirrel 和 fonts.com。
如果您不知道如何搭配字型，可以嘗試 Font Pair，它幫助設計師將美麗的 Google 字型搭配在一起。
挑選字型時，請記住使用過多的自訂字型會使您的網站變慢。因此，您應該選擇兩種字型並在整個設計中使用，這也會帶來設計的一致性。
在 WordPress 中新增 Google 字型
方法 1：使用 WordPress 插件新增 Google 字型
如果您想在網站上新增並使用 Google 字型，那麼這種方法對初學者來說是最簡單且最推薦的。
首先，您需要安裝並啟用Google Fonts Typography 插件。詳情請參閱我們的逐步指南。
優惠：如果您想獲得該插件的高級版本，請確保使用我們的Google Fonts for WordPress 優惠券享受 20% 折扣。這將讓您在 WordPress 主題中更改字型顏色和大小等更多功能。
啟用後，您將有機會輸入您的電子郵件地址以接收官方快速入門指南。
接下來，您需要在管理員側邊欄中點擊 Fonts Plugin » Customize Fonts。
這會自動帶您進入 WordPress 主題自訂器，並自動打開新的「Fonts Plugin」部分。
在這裡，您可以在「基本設定」部分選擇您網站的默認字型，並在「高級設定」部分的網站特定部分選擇字型。
首先，點擊「基本設定」。在這裡，您可以為內容、標題以及按鈕和欄位選擇字型。
「字型家族」下拉菜單讓您選擇新字型。您會在頂部找到默認字型，然後是系統字型，最後是一個包含超過 1400 種 Google 字型的巨大全單。
選擇新字型後，預覽會自動更改，顯示效果。
現在，您可以使用插件的高級設定來微調您的字型選擇。您需要點擊頁面左上角的「<」返回箭頭按鈕，然後點擊「高級設定」部分。
在這裡，您會找到不同網站部分的設定，例如網站標題、導航菜單、內容區域、側邊欄和頁腳。
例如，「內容」部分將提供更改不同標題級別和引用的字型選項。您可以從下拉菜單中選擇想要使用的自訂字型。
您可以以類似方式為側邊欄區域選擇自訂字型。只需點擊返回按鈕並進入「側邊欄」設置。那裡有下拉菜單可選擇側邊欄標題和內容的字型。
滿意您的自訂字型選擇後，別忘了點擊「發佈」按鈕保存更改。
方法 2：手動在 WordPress 中新增 Google 字型
此方法需要將代碼新增到 WordPress 主題文件中。如果您以前沒有做過這件事，請參閱我們的指南。
首先，瀏覽 Google 字型庫並選擇您要使用的字型。在字型頁面上，您會看到該字型的可用樣式。
選擇您想在項目中使用的樣式，然後點擊頁面頂部的「查看選擇的家族」按鈕。
這會打開一個側邊欄，您可以在其中複製嵌入代碼。
有兩種方法可以將此代碼新增到您 WordPress 網站中。
首先，您可以編輯主題的 header.php 文件，並將代碼粘貼在
標籤之前。但是，如果您不熟悉 WordPress 中的代碼編輯，您可以使用插件新增此代碼。只需安裝並啟用 WPCode 插件。詳情請參閱我們的逐步指南。
啟用後，前往代碼片段 » 標頭和頁尾頁面，在「標頭」框中粘貼嵌入代碼。
別忘了點擊「保存變更」按鈕保存更改。插件現在會開始在網站所有頁面上載入 Google 字型嵌入代碼。
您可以在主題的樣式表中這樣使用這個字型：
.h1 site-title {font-family: 'Open Sans', Arial, sans-serif;}
有關詳細信息，請參閱我們的指南。
在 WordPress 中使用 Adobe 字型新增自訂字型
Adobe 字型（以前名為 Typekit）是另一個免費和高級資源，您可以在設計項目中使用很棒的字型。他們有一個付費訂閱以及一個有限的免費計劃。
只需註冊一個 Adobe 字型帳戶，然後訪問「瀏覽字型」部分。從這裡，您需要點擊 </> 按鈕來選擇字型並創建項目。
接下來，您將看到帶有項目 ID 的嵌入代碼。它還會告訴您如何在主題的 CSS 中使用該字型。
您需要將此代碼粘貼到網站的
部分中。有兩種方法可以將此代碼新增到您 WordPress 網站中。
首先，您可以編輯主題的 header.php 文件，並將代碼粘貼在
標籤之前。但是，如果您不熟悉 WordPress 中的代碼編輯，您可以使用插件新增此代碼。只需安裝並啟用 WPCode 插件。
啟用後，前往代碼片段 » 標頭和頁尾頁面，在「標頭」框中粘貼嵌入代碼。然後，點擊「保存變更」按鈕。
就是這樣。現在您可以在主題的樣式表中這樣使用您選擇的 Typekit 字型：
h1 .site-title {font-family: gilbert, sans-serif;}
有關詳細指示，請查看我們關於如何使用 Adobe 字型（Typekit）在 WordPress 中新增炫酷排版的教程。
在 WordPress 中使用 CSS3 @font-face 新增自訂字型
在 WordPress 中新增自訂字型的最直接方法是使用 CSS3 @font-face 方法。此方法允許您在網站上使用任何字型。
首先，您需要下載所需字型的網頁格式。如果沒有該字型的網頁格式，您可以使用 FontSquirrel Webfont 生成器進行轉換。
擁有網頁字型檔後，您需要將其上傳到 WordPress 主機伺服器上。最佳位置是將字型上傳到主題或子主題的目錄中的新「字型」文件夾中。
您可以使用 FTP 或 cPanel 的文件管理器上傳字型。
上傳字型後，您需要使用 CSS3 @font-face 規則在主題的樣式表中載入字型，如下所示：
@font-face {
font-family: Arvo;
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
font-weight: normal;
}
別忘了將字型系列和網址替換為您自己的字體。
之後，您可以在主題的樣式表中這樣使用該字型：
.h1 site-title {
font-family: 'Arvo', Arial, sans-serif;
}
直接使用 CSS3 @font-face 載入字型並不總是最佳解決方案。例如，如果您使用的是 Google 字型或 Typekit 字型，那麼最好從他們的伺服器直接提供字型以獲得最佳性能。
我們希望這個教程能幫助您學習如何在 WordPress 中新增自訂字型。您也可以查閱我們的如何嵌入 Facebook 視頻，或查看我們的最佳 Instagram 插件清單。
如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道，獲取 WordPress 視頻教程。您也可以在Twitter 和 Facebook 上找到我們。
