如何手動和使用插件添加頂級WordPress Google字體

讓我們學習如何在WordPress中添加Google字體。

您網站的設計在為訪問者提供出色的用戶體驗中起著不可或缺的作用。儘管有很多方法可以使您的設計美觀,但我們將專註於字體!

字體在您網站的設計中起著至關重要的作用,選擇正確的字體至關重要。實際上,如果您選擇合適的字體來適合您的網站個性,它可以對您的網站跳出率和轉換率產生實時影響,因為簡潔的文本演示可以為您的網站訪問者帶來引人入勝的體驗並幫助您提升用戶訂婚。

我將向您展示如何通過兩種簡單的方法輕鬆將Google字體添加到WordPress網站;使用插件手動將Google字體添加到WordPress。

但是在開始安裝過程之前,我想分享一些有關Google官方字體的基本知識,以防您熟悉它們。

閱讀如何在WordPress上添加Facebook評論

表中的內容:

  1. 關於Google字體
  2. 如何手動添加WordPress Google字體
  3. 如何使用插件添加Google字體WordPress
  4. WordPress網站的最佳Google字體

關於Google字體

Google於2010年正式推出了其字體,稱為Google Web Fonts,這是一個免費的許可字體庫,它提供了一個互動式字體網路目錄,供用戶在其網站上使用。所有字體均可用並且免費使用。

那麼,為什麼要在您的網站上使用Google字體?好吧,有幾個原因:

使用Google字體的好處:

  • 他們甚至可以免費用於商業目的。
  • 它們是預先託管的,所有資源都可以通過Google伺服器提供。
  • Google字體易於使用。只需將腳本代碼嵌入您的網站或使用插件(適用於WordPress)即可。
  • 它們是可下載的,可以上傳到您的本地主機。

現在,我將向您展示如何將Google字體添加到WordPress網站。

  1. 如何手動添加WordPress Google字體
  2. 如何使用插件添加Google字體WordPress

有三種方法可以將Google字體手動添加到WordPress中,我也將介紹它們。

現在,讓我們開始吧!

如何手動添加WordPress Google字體

手動添加Google字體可能會有點技術問題,並且需要一些代碼,因此,如果您不熟悉編碼,建議您跳過此方法,直接使用插件在WordPress網站上添加Google字體。

第1步:找到適合您網站的最佳Google字體

首先,轉到Google字體網站,然後在WordPress網站上為您的網站選擇所需的字體。

查找Google字體

如果您已經知道要查找的字體,則可以使用搜索欄。另外,您可以通過篩選字體類別,語言和字體屬性來獲得所需的內容,從而實現選擇性。

Google字體列表

Google提供了一種快速預覽功能,可讓您預覽要選擇的字體。您只需要單擊字體欄位,然後標記文本並鍵入任何內容即可檢查顯示。

我將在本教程中使用Montserrat字體,並向您展示如何使用Google字體並將其添加到WordPress。

第3步:選擇和添加Google字體

由於要使用蒙特塞拉特(Montserrat),因此,我將通過單擊加號(+)來選擇字體,如下圖所示。

選擇並添加Google字體

當您單擊任何字體的「加號」時,屏幕底部將顯示一個欄(如下所示),顯示您可能已為站點選擇的字體系列的數量。它基本上充當購物車,並且您可以根據需要添加幾種字體。

google Family字體已選擇

步驟3:選擇樣式和自定義字體

打開選定的「家庭」選項卡時,您將找到兩個選項:「嵌入」和「自定義」。您需要打開自定義選項,然後選擇字體樣式(大小,粗體,斜體等)和語言。

您可以通過勾選複選框來選擇要添加的不同字體樣式。您可以在下面的圖片中看到,我選擇了「常規400」和「淺300斜體」樣式。

選擇字體樣式

注意:載入時間顯示或指示載入到您的網站頁面上所需的時間。

確保只選擇所需的樣式,因為選擇的樣式越多,載入時間就越長。

谷歌家庭字體設置

步驟4:將Google字體添加到您的WordPress網站

現在是時候將Google字體添加到您的WordPress網站。為此,單擊「嵌入」,您將看到所選字體的腳本代碼,如下圖所示。

嵌入字體

從這裡開始,有三種方法可以將所選字體添加到您的網站:

  1. 添加Google字體-WordPress方式
  2. 將Google字體代碼嵌入到Header.php中
  3. 通過導入添加Google字體

A.添加Google字體-WordPress方式

這是WordPress推薦的一種方法,可以將Google字體添加到您的WordPress網站。返回「 Google字體」中的「嵌入」標籤,然後複製您Google字體的URL(不是下圖所示的整個腳本)。就我而言,URL是https://fonts.googleapis.com/css?family=Montserrat:300i,400&display=swap。

谷歌字體API

現在,您需要在function.php文件中添加代碼。如果您正在使用本地主機,則它將位於主題文件夾中。就我而言,它位於「磁碟」>「 Xampp」>「 htdocs」>「 wordpress」>「 wp-content」>「主題」>「 29」。

主題功能

如果您是在實時站點或任何託管平台上工作,則需要使用任何FTP客戶端進行訪問。同樣,就我而言,它位於:
應用程序> MyDB> public_html> wp-content>主題>二十九functions.php字體設置接下來,打開您的functions.php文件,並添加以下代碼:

函數wpblog_add_google_fonts(){

wp_enqueue_style('wpblog_google_fonts','https://fonts.googleapis.com/css?family=Montserrat:300i,400&display=swap',false);}

add_action('wp_enqueue_scripts','wpblog_add_google_fonts');

注意:請不要忘記使用您自己的網址更改鏈接。

現在,保存文件,因為您已通過WordPress推薦的方法成功將Google字體添加到WordPress網站。

B.將Google字體代碼嵌入到header.php中

通過這種方法,您可以通過簡單地複製「嵌入」選項卡上的代碼並將其添加到主題的header.php文件中來添加Google字體。

您將在主題文件夾中找到此文件:
磁碟> Xampp> htdocs> wordpress> wp-content>主題> 21。

將Google字體代碼嵌入到header.php中

現在,打開header.php文件,並在其中添加以下代碼:

注意:將此代碼添加到 部分。

只需點擊「保存」即可完成嵌入過程!

C.通過導入添加Google字體

如果您不想將字體載入到伺服器上,而是想從其他地方調用它,則可以使用此方法。在這種情況下,最簡單的在WordPress上添加Google字體的方法是將它們載入到樣式表中。 Google提供了一種簡單的解決方案,您只需單擊「導入」即可找到CSS腳本:

通過導入添加Google字體

現在,您需要複製腳本而無需