如何在WordPress中添加自定義字體


是否要在WordPress中添加自定義字體? 自定義字體使您可以在網站上使用不同字體的精美組合,以改善版式和用戶體驗。

自定義字體除了看起來不錯之外,還可以幫助您提高可讀性,創建品牌形象並增加用戶在您的網站上花費的時間。

在本文中,我們將向您展示如何使用Google Fonts,TypeKit和CSS3 @ Font-Face方法在WordPress中添加自定義字體。

在WordPress中添加自定義字體

注意: 加載太多字體可能會減慢您的網站速度。 我們建議選擇兩種字體並在您的網站上使用它們。 我們還將向您展示如何正確加載它們而不降低網站速度。

在介紹如何在WordPress中添加自定義字體之前,讓我們看一下如何查找可以使用的自定義字體。

如何查找自定義字體以在WordPress中使用

字體曾經很昂貴,但現在已經不多了。 有很多地方可以找到很棒的免費網絡字體,例如Google Fonts,Typekit,FontSquirrel和fonts.com。

如果您不知道如何混合和匹配字體,請嘗試使用“字體對”。 它可以幫助設計師將精美的Google字體配對在一起。

在選擇字體時,請記住使用過多的自定義字體會降低網站速度。 這就是為什麼您應該選擇兩種字體並在整個設計中使用它們的原因。 這還將為您的設計帶來一致性。

影片教學

訂閱WPBeginner

如果您不喜歡該視頻或偏愛書面指南,請繼續閱讀。

從Google字體在WordPress中添加自定義字體

Google字體預覽

Google字體是網站開發人員中最大,免費和最常用的字體庫。 您可以通過多種方式在WordPress中添加和使用Google字體。

方法1:使用Easy Google Fonts插件添加自定義字體

如果要在網站上添加和使用Google字體,則此方法是迄今為止最簡單的方法,建議初學者使用。

您需要做的第一件事是安裝並激活Easy Google Fonts插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,您可以轉到 外觀»定制器 頁。 這將打開實時主題定制器界面,您將在其中看到新的“版式”部分。

定製字體

單擊“排版”,將顯示網站的不同部分,可在其中應用Google字體。 只需單擊要編輯部分下面的“編輯字體”。

版式設置

在字體系列部分下,您可以選擇要在網站上使用的任何Google字體。 您還可以選擇字體樣式,字體大小,填充,邊距等。

根據您的主題,此處部分的數量可能會受到限制,並且您可能無法直接更改網站許多不同區域的字體選擇。

為了解決這個問題,該插件還允許您創建自己的控件,並使用它們來更改網站上的字體。

首先,您需要訪問 設置»Google字體 頁面並提供字體控件的名稱。 使用有助於您快速了解將在何處使用此字體控件的內容。

字體控制部分

接下來,單擊“創建字體控件”按鈕,然後將要求您輸入CSS選擇器。

您可以添加要定位的HTML元素(例如h1,h2,p,blockquote)或使用CSS類。

您可以在瀏覽器中使用“檢查”工具來查找要更改的特定區域使用的CSS類。

添加CSS選擇器

現在,單擊“保存字體控制”按鈕以保存您的設置。 您可以根據需要在網站的不同部分創建任意數量的字體控制器。

要使用這些字體控制器,您需要轉到 外觀»定制器 並單擊“版式”選項卡。

在“版式”下,您現在還將看到“主題版式”選項。 單擊它會顯示您之前創建的自定義字體控件。 現在,您只需單擊編輯按鈕即可選擇該控件的字體和外觀。

主題排版選項

不要忘記單擊“保存”或“發布”按鈕以保存您的更改。

方法2:在WordPress中手動添加Google字體

此方法要求您將代碼添加到WordPress主題文件中。 如果您以前沒有做過,請參閱我們的指南,了解如何在WordPress中復制和粘貼代碼。

首先,訪問Google字體庫,然後選擇要使用的字體。 接下來,單擊字體下方的快速使用按鈕。

選擇您要使用的字體樣式

在字體頁面上,您將看到該字體可用的樣式。 選擇要在項目中使用的樣式,然後單擊頂部的側邊欄按鈕。

獲取字體嵌入鏈接

接下來,您需要切換到側邊欄中的“嵌入”標籤,以復制嵌入代碼。

您可以通過兩種方式將此代碼添加到WordPress網站。

首先,您可以簡單地編輯主題的header.php文件並將代碼粘貼到 標籤。

但是,如果您不熟悉WordPress中的代碼編輯,則可以使用插件添加此代碼。

只需安裝並激活“插入頁眉和頁腳”插件即可。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,轉到 設置»插入頁眉和頁腳 頁,然後將嵌入代碼粘貼到“標題中的腳本”框中。

將字體代碼添加到您的WordPress網站

不要忘記單擊“保存”按鈕來存儲您的更改。 現在,該插件將開始在您網站的所有頁面上加載Google字體嵌入代碼。

您可以像這樣在主題的樣式表中使用此字體:

.h1 site-title { 
font-family: 'Open Sans', Arial, sans-serif; 
}

有關更多詳細說明,請參閱我們的指南,了解如何在WordPress主題中添加Google字體。

使用Typekit在WordPress中添加自定義字體

Typekit Adob​​e字體

Adobe Fonts的Typekit是另一個免費的高級資源,可用於設計項目中的真棒字體。 他們有付費訂閱以及您可以使用的有限免費計劃。

只需註冊一個Adobe Fonts帳戶,然後訪問“瀏覽字體”部分。 在這裡,您需要單擊 按鈕選擇一種字體並創建一個項目。

將Typekit字體添加到項目

接下來,您將看到帶有項目ID的嵌入代碼。 它還將向您展示如何在主題的CSS中使用字體。

您需要將此代碼複製並粘貼到 您的網站部分。

Typekit字體嵌入代碼

您可以通過兩種方式將此代碼添加到WordPress網站。

首先,您可以簡單地編輯主題的header.php文件並將代碼粘貼到 標籤。

但是,如果您不熟悉WordPress中的代碼編輯,則可以使用插件添加此代碼。

只需安裝並激活“插入頁眉和頁腳”插件即可。

激活後,轉到 設置»插入頁眉和頁腳 頁,然後將嵌入代碼粘貼到“標題中的腳本”框中。

在WordPress中通過Adobe字體添加Typekit

就是這樣,您現在可以使用在WordPress主題的樣式表中選擇的Typekit字體,如下所示:

h1 .site-title { 
font-family: gilbert, sans-serif;
} 

有關更多詳細說明,請查看我們的教程如何使用Typekit在WordPress中添加很棒的排版。

使用CSS3 @ font-face在WordPress中添加自定義字體

在WordPress中添加自定義字體的最直接方法是使用CSS3添加字體 @font-face 方法。 此方法使您可以使用網站上喜歡的任何字體。

您需要做的第一件事是以網絡格式下載所需的字體。 如果您的字體沒有Web格式,則可以使用FontSquirrel Webfont生成器對其進行轉換。

有了webfont文件後,您需要將其上傳到WordPress託管服務器上。

上載字體的最佳位置是在主題或子主題目錄中的新“字體”文件夾中。

您可以使用cPanel的FTP或文件管理器上傳字體。

上載字體後,您需要使用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;  
}

不要忘記用自己的字體和URL替換字體。

之後,您可以在主題樣式表中的任何位置使用該字體,如下所示:

.h1 site-title { 
font-family: "Arvo", Arial, sans-serif; 
}

直接使用CSS3 @ font-face加載字體並不總是最好的解決方案。 如果您使用的是Google Fonts或Typekit中的字體,那麼最好直接從其服務器提供字體以實現最佳性能。

僅此而已,我們希望本文能幫助您在WordPress中添加自定義字體。 您可能還需要查看有關如何在WordPress中使用圖標字體以及如何在WordPress中更改字體大小的指南。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。