如何將自定義字體添加到 WordPress

已發表: 2019-07-09

如果您希望您的網站真正脫穎而出，那麼使用自定義字體將幫助您實現這一目標。 有數千種漂亮的自定義字體可供選擇，通過為您的項目選擇合適的字體，您將能夠創建一個不僅獨特而且反映您的風格和品牌的網站。 那麼如何向 WordPress 添加自定義字體呢？

在本文中，我們將介紹您需要了解的有關將自定義字體應用於您的網站的所有信息。 這包括：

  • 在哪裡可以找到自定義字體
  • 如何使用插件 Easy Google Fonts 將 Google 字體添加到您的網站
  • 手動將 Google 字體添加到您的網站（無需插件）
  • 將 Adob​​e 字體添加到 WordPress
  • 如何將任何自定義字體添加到您的 Web 空間

準備好開始了嗎？

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

谷歌字體

如今，許多高級 WordPress 主題都附帶了大量的自定義字體。 但是，這些通常會增加主題膨脹，並且對您網站的加載時間的影響比您想像的要大。 您還會發現您實際上最多只使用了幾種自定義字體，因此您的主題提供的大多數字體將永遠不需要。

因此，我們建議選擇輕量級的 WordPress 主題，然後您可以在必要時添加自定義字體。 您可以在許多地方找到適合您網站的自定義字體。 讓我們來看看…

  • 谷歌字體——最受歡迎的選擇是谷歌字體，它提供了一個免費目錄，其中包含 900 多種開源設計字體，可用於 135 多種語言。 這些字體可以快速瀏覽，然後無縫集成到任何網頁設計項目中。
  • Adobe Fonts（以前稱為 Typekit）——雖然 Typekit 提供免費和高級版本的服務，現在更名為 Adob​​e Fonts，但您需要註冊付費的 Adob​​e Creative Cloud 包才能訪問此資源。 有數千種字體可供選擇，所有字體均已授權用於個人和商業用途，您還可以從項目主題字體包中進行選擇，非常適合那些缺乏設計眼光的人。
  • Font Squirrel – 在 Font Squirrel 庫中，您會發現免費和高級字體的混合，後者可以一次性購買。 同樣，您可以從數以千計的高質量字體中進行選擇，其中大多數是免費的並獲得商業許可。
  • Fonts.com – Fonts.com 提供超過 150,000 種桌面和網絡字體產品，包含令人印象深刻的優質自定義字體集合。 您還可以在 Font.com 博客上找到各種有趣的文章，分享排版技巧和技巧。
  • FontPair – FontPair 提供與其他資源略有不同的體驗，將 Google Fonts 中的字體結合在一起，幫助您找到適合您網站的字體組合。

所以，現在您知道在哪裡可以找到自定義字體了。 接下來讓我們看看如何將 Google 字體添加到您的 WordPress 網站。

如何使用插件將 Google 字體添加到 WordPress Easy Google Fonts

簡單的谷歌字體

由於 Google Fonts 是最流行的自定義字體資源，我們將首先了解如何將此庫中的字體添加到您的網站。 有很多方法可以做到這一點，但最快和最簡單的選擇是使用 WordPress 插件 Easy Google Fonts。

Easy Google Fonts 是一個免費的 WordPress 插件，可讓您將自定義字體插入到您的 WordPress 網站中，而無需編寫任何代碼。 該插件與 WordPress 定制器集成，允許您在網站前端實時插入和使用 Google 字體，而無需刷新頁面。

所以現在讓我們了解如何安裝和使用這個插件。

第 1 步：安裝 Easy Google 字體

要開始使用 Easy Google Fonts，請打開您的 WordPress 儀表板並從菜單中選擇插件 > 添加新字體。

然後在搜索功能中輸入Easy Google Fonts ，一旦插件被檢索到，點擊安裝 > 激活。

激活插件

現在，您將在 WordPress 菜單的“設置”下找到 Easy Google 字體。

第 2 步：在 WordPress 定制器中編輯字體

安裝 Easy Google Fonts 後，從 WordPress 菜單中選擇外觀 > 自定義。 您的網站現在將在前端打開，您會發現定制器中已添加了排版部分。

定製版式

單擊版式。 然後，您可以選擇您希望在其中應用自定義 Google 字體（例如段落、頁眉 2、頁眉 3 等）的網站的不同區域。

默認排版

在要編輯的部分下，單擊Edit Font 。 然後，您可以選擇要使用的字體——您將能夠直接在您的網站上預覽每種字體的外觀。

編輯字體

您不僅可以更改字體類型，還可以更改顏色、大小、位置等等。 對新字體感到滿意後，單擊Publish 。

第 3 步：創建自定義字體控件

Easy Google Fonts 默認控件將允許您更改段落部分和標題 1-6 的字體。 但是，並非主題的所有元素都可以通過默認字體控件進行管理。

如果要更改主題的不同元素（段落或標題除外），則需要創建自己的自定義字體控件。 儘管 Easy Font Control 使您能夠輕鬆地做到這一點，但您仍然需要對 CSS 選擇器有基本的了解。

要添加自定義字體控件，請從 WordPress 儀表板中選擇設置 > Google 字體。 然後，在Edit Font Controls選項卡中，為您的新字體控件組指定一個適當的名稱，然後選擇Create Font Control 。 在這裡，我們將為塊引用創建一個字體控件……

塊引用

在Add CSS Selectors下，為您要管理的元素添加 CSS 選擇器。 如果您願意，可以添加多個元素。 然後選擇Save Font Control 。

編輯字體控件

回到網站前端的定制器中，在Typography下，您現在可以找到 Theme Typography 選項，您可以在其中訪問新的自定義控件。

主題排版

您現在可以為特定自定義元素選擇新的自定義字體並更改任何其他外觀和定位設置。

塊引用

對於想要從 Google 向 WordPress 添加自定義字體的任何人來說，Easy Custom Fonts 都是一個不錯的選擇。 但是，如果您願意，您也可以僅使用代碼手動將 Google 字體添加到您的網站，無需插件。 讓我們看看如何做到這一點……

如何手動將 Google 字體添加到 WordPress（無需插件）

如果您希望手動將 Google 字體添加到 WordPress，那麼您將需要非常基本的編碼知識。

第 1 步：選擇 Google 字體

要開始使用，請打開 Google 字體，然後選擇您要添加到網站的自定義字體類型。

然後在字體頁面上，單擊Select this Font 。 在這裡，我們選擇了 Indie Flower 字體。

獨立花

現在，您的屏幕上將出現一個彈出窗口。 根據您選擇的字體，您將能夠訪問字體粗細和样式的一系列自定義選項，以及查看嵌入信息。

獨立花卉嵌入信息

第 2 步：在您的 WordPress 網站中嵌入自定義字體的代碼

接下來，您需要復制嵌入代碼（參見上面的彈出窗口）並將其粘貼到 WordPress 主題的<head>部分。 最簡單的方法是安裝免費的 WordPress 插件插入頁眉和頁腳。 使用此插件，您可以快速將代碼添加到您的網站，而無需編輯您的主題文件。

安裝後，通過從 WordPress 儀表板中選擇設置 > 插入頁眉和頁腳來打開插件設置。 然後，您需要將您的 Google 字體嵌入代碼添加到頁眉部分。

插入頁眉和頁腳插件

同樣，如果您願意，您可以編輯子主題的 header.php 文件。

第 3 步：使用 CSS 應用新字體

將自定義字體的 HTML 代碼添加到網站後，您現在可以使用 CSS 應用新的自定義字體。 在 Google 字體彈出窗口中，您將找到特定於您的新字體的 CSS 規則。

獨立花 CSS

回到網站直播端的定制器中，選擇附加 CSS。 您可以在此處輸入 CSS 代碼來自定義您網站上的字體。 您可以在下面看到我們已將 Indie Flower CSS 代碼應用於標題 2 和段落部分……

附加 CSS

定制器將實時向您顯示字體更改，如果您對結果滿意，請單擊發布。

如何將 Adob​​e 字體添加到 WordPress

如果您已註冊 Adob​​e 高級 Creative Cloud 軟件包，那麼您將能夠將其任何自定義字體添加到您的 WordPress 網站。 此過程與手動將 Google 字體添加到您的站點的過程非常相似。 讓我們快速瀏覽一下。

第 1 步：選擇 Adob​​e 字體

首先，您需要瀏覽 Adob​​e 廣泛的字體庫並選擇適合您項目的字體。 做出選擇後，單擊</>圖標將字體添加到新的Web 項目。

選擇和 Adob​​e 字體

現在將要求您命名您的 Web 項目，並使用複選框選擇要包含的字體粗細和样式。 然後選擇創建項目。

第 2 步：在您的 WordPress 網站中嵌入 Adob​​e Font 的代碼

下一步是將 Adob​​e 為您選擇的字體提供的代碼嵌入到您的 WordPress 網站中。

這與嵌入 Google 字體代碼的過程完全相同。 只需將代碼嵌入您網站上的<head>標記中，或使用 WordPress 插件插入頁眉和頁腳（如前所述）。

第 3 步：使用 CSS 應用新字體

同樣，與 Google 字體一樣，您現在可以使用 CSS 規則應用新的 Adob​​e 自定義字體。 在您的 Adob​​e 儀表板中，您的 Web 項目頁面將列出您選擇的每種字體類型的 CSS 字體系列名稱以及字體樣式和數字粗細。

Adobe Font CSS 字體系列

回到您的 WordPress 網站，這些 CSS 規則可以在附加 CSS 下的定制器中使用。

所以現在我們已經介紹瞭如何使用廣受歡迎的免費 Google Fonts 以及令人印象深刻的高級資源 Adob​​e Fonts 將自定義字體添加到 WordPress。

但是，我們將討論的最後一個選項使您可以通過將任何自定義字體上傳到您網站的服務器來將其添加到您的網站。 讓我們了解更多。

如何將自定義字體添加到您的 Web 空間

將自定義字體添加到您的網站空間相對簡單，但同樣，您需要對 CSS 有基本的了解才能將字體應用到您的網站。

第 1 步：下載自定義字體

如本文開頭所述，有許多資源可供您選擇免費或高級自定義字體以在您的網站上使用。 在添加到您的服務器時選擇自定義字體時，只需確保您有權使用它，並且它是可下載的。

在這裡，我們從 Squirrel Fonts 下載了免費的自定義字體 Milkshake。

奶昔

以 webfont 格式下載您的自定義字體非常重要。 Webfont 容器格式 WOFF 享有最多的跨瀏覽器支持，但 Google 建議提供多種格式，以便為跨設備的用戶提供一致的體驗。

如果您需要將自定義字體轉換為不同的格式，那麼 Squirrel Font 提供了一個免費的 Webfont Generator 工具，可以讓您這樣做。

第 2 步：將自定義字體上傳到您的服務器

下一步是將您的自定義字體上傳到您的服務器。 為此，請在您站點的 cPanel 中打開文件管理器。

然後在您的活動主題文件夾中，創建一個名為Fonts的新文件夾並在此處上傳您的自定義字體。

上傳字體

如果您有多種格式的字體，請將它們全部上傳到Fonts文件夾。 您的自定義字體現已添加到您的網絡空間。

第 3 步：使用 CSS 將自定義字體應用到您的網站

您現在需要將自定義字體應用到您的網站。 首先，您需要在主題的樣式表中加載字體。 為此，請打開 WordPress 定制器並在 Additional CSS 下添加以下代碼：

 @字體臉{
    字體系列：奶昔；
    src: url("https://jonesblogs.com/wp-content/themes/beautiful-pro/fonts/milkshake.woff")
         格式（“woff”）；
}

重要的是，確保更改字體名稱和 URL（複製服務器上字體文件的 URL）。

然後，您可以繼續使用 CSS 規則來更新您網站上的字體。 以下是如何將自定義字體應用於頁眉 3 和段落部分的示例：

奶昔 CSS

一旦您對新的自定義字體在您的網站上的外觀感到滿意，請點擊Publish 。

關於如何向 WordPress 添加自定義字體的最終想法

如您所見，如果您正在尋找一種漂亮且引人注目的自定義字體，那麼有許多資源可以讓您為您的項目找到完美的字體。 更重要的是，您現在掌握瞭如何成功地將自定義字體添加到 WordPress 的知識。 那麼，您會選擇哪些自定義字體呢？

對如何向 WordPress 添加自定義字體有任何疑問？ 請在下面的評論中詢問...