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

已發表: 2020-11-05

學習自定義網站的排版是創建和運行網站的一個非常基本的方面。 它可以改變您網站的整體感覺，並對訪問者與客戶互動的方式產生重大影響。

因此，有必要知道如何將自定義字體添加到 WordPress。 選擇正確的字體可以為您的網站創建獨特的外觀，讓您建立視覺品牌，並提高可讀性和訪問者參與度。

您可以在線使用數千種字體，其中許多是免費的。 本文將討論將兩個最流行的網絡字體數據庫中的字體添加到您的網站 - Google Fonts 和 Adob​​e Fonts，也稱為 Typekit Fonts。 這些字體庫包括數千種您可以下載的網絡字體。

除了這些，互聯網上還有無數其他字體庫，我們也會討論這些。

您可以通過以下方式將這些自定義字體添加到您的網站：

目錄

  • 如何將自定義字體添加到 WordPress
    • 1.使用插件添加谷歌字體
    • 2.使用代碼添加谷歌字體
    • 3. 將 Adob​​e TypeKit 字體添加到 WordPress
  • 其他一些自定義字體庫
  • 如何使用插件添加其他自定義字體
  • 如何手動添加其他自定義字體
  • 結論

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

1.使用插件添加谷歌字體

如果您打算使用 Google 字體對 WordPress 網站內容進行風格化，那麼有一個方便的工具可以直接將您的 WordPress 定制器與 Google 字體數據庫連接起來。 Easy Google Fonts 是免費的，讓您無需使用任何代碼即可使用 Google 字體。

  1. 對於這種方法，首先安裝 Easy Google Fonts 插件。 設置插件後，您會在 WordPress 定制器（外觀 > 定制）中找到一個名為“排版”的新選項。
排版

2. 進入排版選項後，您會發現可以自定義的不同默認內容部分或字體控件。 您可以通過單擊“編輯字體”找到該特定組的字體設置。

編輯字體

字體設置非常廣泛，允許您自定義文本的幾乎每個方面以創建所需的字體樣式，例如字體大小等。 您可以從樣式選項卡下的字體系列選項更改該特定文本類別的字體。

在外觀選項卡下，您可以找到其他常用選項，例如字體顏色、字體大小和行高。

在 Positioning 選項卡下有一些深入的可視化控件，例如 Margin、Padding 和 Border。

3. 現在，您的網站可能還需要特別注意此插件提供的默認字體控件可能無法解決的某些文本類別。 也許您只想為所有標題設置相同的排版設置，並希望一個類別來控制所有標題。 您可以通過轉到“設置”>“Google 字體”來創建自定義字體控件。

谷歌字體

4. 轉到“管理字體控件”選項卡，然後單擊“創建字體控件”。

創建一個新的字體控件

5. 您將被要求提供 CSS 選擇器來定義此特定類別。 然後，單擊“安全字體控件”以創建新的類別/字體控件。

CSS 選擇器

6. 自定義字體控件可以在與默認字體不同的位置找到。 返回 WordPress 定制器並單擊排版選項。 你會發現有兩個類別——默認字體和主題字體。 自定義字體控件將在主題排版選項下找到。

主題排版

2.使用代碼添加谷歌字體

  1. 如果您想在沒有插件的情況下將您的 Google 字體添加到 WordPress，您可以將代碼添加到您的主題文件中。 您可能希望為此創建一個子主題，以便在您不喜歡更改時可以恢復更改。
單擊選擇此樣式

2. 訪問 Google Fonts 網站並找到您喜歡的字體。 您將在字體頁面中找到每種字體的不同樣式。 單擊所需樣式的“選擇此樣式”按鈕。 您選擇的字體將被保存以在特殊部分中使用。 在頁面的右上角，有一個按鈕可以查看您選擇的字體。 它打開一個帶有兩個選項卡的側邊欄。 單擊“嵌入”選項卡。

選定的家庭

3. 複製此嵌入鏈接並將其粘貼到 header.php 文件中，就在 <body> 標記之前。

4. 如果您不想處理使用主題文件的麻煩，那麼有一個方便的插件，稱為插入頁眉和頁腳，可以輕鬆地將代碼添加到您的主題文件。 您可以通過標題為“插入頁眉和頁腳”的設置欄中的自己的部分來使用此插件。 只需將代碼粘貼到“標頭中的腳本”框中即可。

插入頁眉和頁腳

3. 將 Adob​​e TypeKit 字體添加到 WordPress

Adobe 有另一個令人印象深刻的自定義字體庫，有免費版本和付費版本​​。 在開始使用他們的字體之前，您需要在 Adob​​e Fonts 網站上擁有一個帳戶。 您可以從“瀏覽字體”頁面開始瀏覽可用字體。

  1. 登錄網站後，您可以通過單擊 </> 按鈕使用您喜歡的字體。
Adobe 字體

2. 要獲得嵌入鏈接，您需要在 Adob​​e Fonts 上創建一個 Web 項目並將所選字體添加到項目中。

為項目選擇字體
嵌入代碼

3. 與使用 Google 字體的過程一樣，您必須將此嵌入鏈接粘貼到主題的 header.php 文件中的 <body> 標記之前。

4.您可以通過使用插入頁眉和頁腳插件來避免直接使用主題文件。 只需轉到設置欄中的插入頁眉和頁腳選項，然後將嵌入代碼粘貼到“頁眉中的腳本”框中。 這將導入您選擇的 TypeKit 字體。

插入頁眉和頁腳

其他一些自定義字體庫

雖然 Google Fonts 和 Adob​​e Fonts 是一些最流行的網絡字體數據庫。 但是，您可以探索許多其他字體庫，以便為您的 WordPress 網站下載正確的字體。 以下是您可以探索的一些內容：

  1. 模板怪物
  2. 字體松鼠
  3. 泉源
  4. 1001 種免費字體
  5. 字體怪胎
  6. 抽象字體
  7. 我的字體

如何使用插件添加其他自定義字體

有一個名為 Use Any Font 的便捷插件，可讓您跳過手動添加自定義字體的麻煩。 它為您提供了一個簡單的界面，您可以通過該界面直接從儀表板添加新字體並將自定義字體分配給所需的元素。

如何手動添加其他自定義字體

如果要手動添加所需的字體，則需要將字體文件上傳到 WordPress 目錄。 為此使用子主題以建立一層安全性，以防您不喜歡新外觀或某些不需要的更改在您的網站中造成錯誤。 子主題將允許您輕鬆還原更改。

從任何字體庫（如 TemplateMonster）下載您想要的字體。 然後，轉到wp-content/themes/your-theme/fonts並使用 FTP 客戶端將其上傳到 Fonts 文件夾。 如果沒有 Fonts 文件夾，則創建一個。

上傳字體文件後，您需要使用樣式表導入字體。 將以下代碼添加到您的style.css文件中：

@字體臉{

font-family：自定義字體；

src：網址（http://yourwebsite.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf）；

字體粗細：正常；

}

您需要將 font-family 替換為您希望導入的字體名稱，並將 URL 替換為您網站的 URL。

結論

通過執行上述步驟，您可以輕鬆地將自定義字體添加到您的 WordPress 網站，並且最省心。 您可以僅從 Google Fonts 和 Adob​​e Fonts 數據庫中使用數以千計的網絡字體。 通過正確選擇自定義字體，您的網站可以獲得不同的魅力，更好地吸引訪問者，並創建與您的主題相關的更好的美學。