如何添加自定義 WordPress 字體（並選擇配對的字體）

已發表: 2019-04-04

正在尋找一種方法將您自己的自定義 WordPress 字體添加到您的網站？

您的 WordPress 主題可能帶有自己的一組字體供您選擇，但選項可能非常有限，因此您想要添加自己的 WordPress 字體是完全可以理解的。

在這篇文章中，您將學習如何通過幾種不同的方法在 WordPress 中上傳和使用任何字體。

如果您不熟悉使用自己的 WordPress 字體的想法，我們將從快速入門開始，了解在哪裡可以找到自定義字體以及如何配對它們。

然後，我們將向您展示如何從以下位置添加自定義 WordPress 字體：

谷歌字體
Adobe 字體 (Typekit)
從字面上看其他任何地方！（通過上傳字體文件並使用 CSS3 @font-face）

單擊此鏈接可直接跳轉到教程。

在哪裡可以找到 WordPress 的自定義字體

最著名的找到自定義 WordPress 字體的地方絕對是 Google Fonts。在 Google Fonts，您會找到一個包含 900 多種字體的存儲庫，借助 Google 的 CDN，所有這些字體都是免費的，並且非常容易集成到您的 WordPress 網站中。

在 Google Fonts 之後，另一個著名的選項是 Adobe Fonts（以前稱為 Typekit ）。 Adobe Fonts 作為 Adobe Creative Cloud 訂閱的一部分免費提供，但非訂閱者無法使用。

最後，您可以找到許多其他聚合免費和高級字體的網站。我們最喜歡的兩個是：

Font Squirrel – 收集 100% 免費用於商業用途的字體。
Fonts.com – 擁有大量優質字體。

如何配對字體使您的網站看起來很棒

通常，您不會在 WordPress 網站上使用單一字體。相反，大多數網站使用成對的字體來創建更有趣的設計並幫助區分內容。

但是，您不想只是隨意地將兩種字體放在一起——這可能看起來不太熱。

相反，您需要兩種可以協同工作的字體，如果您不是設計師，可能很難弄清楚。

為了提供幫助，有很多很棒的網站會為您推薦字體對。例如，如果您找到一種您非常喜歡的字體，您可以使用這些網站中的一個來為它找到一對。我們的一些最愛是：

字體對
豐悅
輸入法

雖然沒有規定只能使用兩種字體，但您應該警惕使用過多的 WordPress 字體。除了可能會造成混亂的設計，使用過多的自定義字體還會減慢網站的加載時間。

如何添加自定義 WordPress 字體：分步指南

現在是有趣的部分——這裡是如何開始使用您自己的自定義 WordPress 字體。

根據您要從何處獲取字體，您可以在此處採用幾條路線。

以下是我們將介紹的三種方法。同樣，您可以單擊鏈接直接跳轉到特定教程：

在 WordPress 中添加 Google 字體（插件、手動或本地託管方法）
在 WordPress 中添加 Adobe Fonts (Typekit)
使用 CSS3 @font-face 在 WordPress 中上傳和添加任何字體

如何將 Google 字體添加到 WordPress

由於 Google Fonts 是自定義 WordPress 字體最流行的來源，因此我們將介紹三種將 Google Fonts 添加到 WordPress 的不同方法：

使用插件從 Google 的 CDN 添加 Google 字體
從 Google 的 CDN 手動添加 Google 字體
使用插件在 WordPress 本地託管 Google 字體

如何使用插件在 WordPress 中添加 Google 字體

由於 Google Fonts 的流行，您可以找到幾個高質量的插件，讓將 Google Fonts 添加到 WordPress 變得非常簡單，我們最喜歡的是 Easy Google Fonts，因為它是：

自由
輕的
使用方便

安裝並激活插件後，轉到 WordPress 儀表板中的外觀 → 自定義以啟動實時 WordPress 定制器。

然後，單擊“排版”選項以選擇您的 Google 字體選項：

從那裡，您可以使用選項為站點上的每個元素選擇自定義字體：

例如，這裡是更改段落字體的樣子：

除了選擇字體本身，該插件還允許您自定義：

字體粗細
文字裝飾
顏色

如果您了解一點 CSS，您還可以使用插件的字體控件功能將某些元素組合在一起。例如，您可以組合標題選擇器以一次定位所有標題。

要進行設置，請轉到設置 → Google 字體並創建一個新的字體控件以針對特定的 CSS 選擇器：

如何在沒有插件的情況下在 WordPress 中添加 Google 字體

由於 Google 將所有字體託管在自己的 CDN 上，因此手動將 Google 字體添加到 WordPress 也非常容易。

基本上，無需將字體文件上傳到您的服務器，您只需鏈接到 Google 託管的 CDN，Google 就會為您處理字體服務。

出於性能原因，有些人不喜歡這樣做 – 如果需要，我將在下一節中分享一種在本地託管 Google 字體的方法。

首先，您需要使用 Google Fonts 網站來選擇要添加的字體。

對於此示例，假設您要使用Roboto 。

轉到字體頁面，然後單擊+ 選擇此字體：

這將在右下角添加一個窗口。單擊以展開該窗口。

如果您想選擇其他字體粗細（例如粗體和斜體），您可以轉到自定義選項卡。為了在可用性和性能之間取得良好的平衡，我們建議選擇絕對最大的三種字體權重：

常規的
斜體
膽大

如果您想要最佳性能，您甚至可以使用更少的資源。

做出選擇後，返回“嵌入”選項卡並複制嵌入字體代碼：

接下來，您需要將此代碼添加到 WordPress 主題的<head>部分。您可以通過以下方式執行此操作：

直接編輯子主題的header.php文件（確保使用子主題 - 否則，當您更新主題時，您的自定義字體將消失）
使用像插入頁眉和頁腳這樣的免費插件

添加代碼後，您可以開始在 CSS 中使用 Google 字體。

如果你回到谷歌字體網站，谷歌實際上會告訴你需要使用的 CSS 規則：

例如，要讓 h2 標籤使用新的 Roboto 字體，您可以轉到外觀 → 自定義 → 附加 CSS並添加以下代碼段：

h2{

字體系列：'Roboto'，無襯線；

}

如何使用插件在 WordPress 中本地託管 Google 字體

這是 Google Fonts 的最終方法！

有些人更喜歡在本地託管 Google 字體，而不是從 Google 的 CDN 加載它們。也就是說，您可以在自己的服務器上託管文件，而不是從“https://fonts.googleapis.com/css?family=Roboto:400,700”之類的鏈接加載它們。

最簡單的方法是使用名為 CAOS for Webfonts 的免費插件。

安裝並激活插件後，您可以轉到設置 → 優化Webfonts以選擇要下載到服務器的字體：

完成此操作後，您就可以開始在 CSS 中使用字體（就像您遵循前面的方法一樣）。

如何在 WordPress 中添加 Adobe Fonts (Typekit)

如果您想在 WordPress 中使用 Adobe Fonts，您基本上可以按照與手動 Google Fonts 方法相同的步驟進行操作。 請記住，Adobe Fonts 服務僅作為 Creative Cloud 訂閱的一部分提供。

首先，您需要使用 Adobe Fonts 網站來選擇您的字體並創建一個Web 項目（詳細說明在此）。

在將字體添加到 Web 項目窗口中，您可以選擇要包含的字體：

然後，Adobe 會給你一個嵌入代碼，就像谷歌字體一樣：

獲取嵌入代碼並使用子主題的header.php文件或插入頁眉和頁腳等插件將其添加到您的站點。

鏈接到 CSS 文件後，您可以使用 Adobe 提供的 CSS 開始將字體應用於您站點上的 CSS 選擇器：

如何在 WordPress 中使用 @font-face

最後，我們將向您展示的最後一種方法是如何在 WordPress 中使用 @font-face。這種方法的好處是它可以處理任何來源的任何字體文件。

基本上，只要你能下載字體文件並有使用權，CSS3 @font-face 就可以搞定。

首先，從您的首選來源下載字體文件。對於本示例，我們將使用 Font Squirrel 的免費字體Alex Brush 。

如果可能，請嘗試以.woff或.woff2文件格式下載文件，以獲得最佳的跨瀏覽器兼容性。如果這不可能，您可以下載不同格式的字體，然後使用免費的 FontSquirrel Webfont Generator 工具將其轉換為.woff ：

接下來，通過 FTP 或 cPanel 文件管理器連接到 WordPress 站點的服務器。然後…

在您的活動主題或子主題的目錄中創建一個名為fonts的新文件夾（某些主題可能已經有一個fonts文件夾。如果是這種情況，您可以跳過此步驟）。
上傳字體文件的字體文件夾。您可以上傳 .woff 和 .woff2 格式

上傳文件後，轉到 WordPress 儀表板中的外觀 → 自定義 → 附加 CSS 。

首先，你需要使用@font-face來添加你的字體……

為此，請輸入您的字體名稱作為font-family並將直接 URL 添加到您服務器上的字體文件中作為URL 。這是我們的 AlexBrush 示例的樣子：

@字體臉{

字體系列：AlexBrush；

源代碼：網址（http://easy-whale.w6.wpsandbox.pro/wp-content/themes/twentynineteen/fonts/alexbrush-regular-webfont.woff）；

字體粗細：正常；

}

完成後，您可以使用 CSS 應用您的字體系列（通過您在 @font-face 註冊的名稱）。例如，以下是對 <h2> 標題使用 AlexBrush 字體的效果：

就是這樣！您可以將這個 CSS3 @font-face 方法用於任何字體文件。

關於自定義 WordPress 字體的最終想法

如果您的 WordPress 主題沒有您想要使用的字體，請不要驚慌！您有很多選項可以添加自己的自定義 WordPress 字體。

最簡單的入門方法是使用 Google Fonts 託管的免費字體或 Adobe Fonts 託管的高級選項。

但是，您絕不僅限於這些服務，通過使用 CSS3 @font-face，您可以將任何字體文件上傳到 WordPress 並開始在您的主題中使用它。

現在走出去，創建自己的字體配對！