如何以“正確”的方式在WordPress主題中添加Google Web字體


對於網站設計師來說,谷歌字體是一種了不起的免費資源。 在WPBv4中,我們開始使用一種流行的Google字體組合:Oswald和Lora。 我們的一些用戶問我們如何在WordPress主題中添加Google Web字體。 如果您還記得,我們​​展示瞭如何在WordPress帖子編輯器中添加Google字體。 在本文中,我們將向您展示如何在WordPress主題中添加Google Web字體。 正確的路,針對性能進行了優化。

查找您喜歡的Google網絡字體

您需要做的第一件事就是找到您喜歡的Google字體。 轉到Google字體並瀏覽庫。 找到所需字體後,請單擊 “快速使用” 按鈕。

Google字體中的快速使用字體

單擊快速使用按鈕後,將帶您進入新頁面。 向下滾動,直到看到用法說明框,其中包含可以添加到網站的代碼。

Google字體嵌入代碼

您將看到有三個不同的選項卡,用於將字體添加到您的站點。 第一個是將Google字體添加到您的網站的標準和推薦方法。 第二個選項卡使用@import CSS方法,最後一個選項卡使用JavaScript方法。

我們將向您展示如何使用這些方法中的每一種以及優點和缺點。

影片教學

訂閱WPBeginner

如果您不喜歡該視頻或需要更多說明,請繼續閱讀。

在WordPress主題中添加Google Web字體

我們通常看到人們使用前兩種方法。

最簡單的方法是打開主題的 style.css 文件並粘貼在@import選項卡中獲得的字體代碼,如下所示:

@import url(https://fonts.googleapis.com/css?family=Lora);
@import url(https://fonts.googleapis.com/css?family=Oswald);

您也可以將多個字體請求組合為一個。 這是您的操作方式:

@import url(https://fonts.googleapis.com/css?family=Lora|Oswald);

這種方法超級簡單,但不是將Google字體添加到WordPress網站的最佳方法。 使用@import方法會阻止並行下載,這意味著瀏覽器將等待導入的文件完成下載,然後才開始下載其餘內容。

如果必須使用@import,則至少將多個請求合併為一個。

性能優化的添加Google Web字體的方法

添加Google字體的最佳方法是使用標準方法,該方法利用鏈接方法而不是導入方法。 只需使用從步驟1中獲得的字體URL。如果要添加多個字體,則可以將兩個字體與|組合。 字符。 然後將代碼放在主題的頭部。

您很可能必須編輯您的 header.php 文件,然後將以下代碼粘貼到主樣式表上方。 該示例如下所示:



基本上,目標是儘早提出字體請求。 根據Google Web Fonts博客的說法,如果在@ font-face聲明之前有一個腳本標記,則Internet Explorer在字體文件下載完成之前不會在頁面上呈現任何內容。

完成此操作後,您可以像這樣在主題的CSS文件中開始使用它:

h1 {
    font-family: 'Oswald', Helvetica, Arial, serif;
}

現在有很多主題框架和子主題。 如果使用主題框架,則不建議特別修改父主題的文件,因為下次您更新該框架時,所做的更改將被覆蓋。 您將需要利用該父主題或框架提供給您的掛鉤和過濾器,以在您的子主題中正確添加Google字體。

在WordPress中適當地使Google字體入隊

將Google字體添加到WordPress網站的另一種方法是將字體放入主題的functions.php文件或特定於站點的插件中。

function wpb_add_google_fonts() {

wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false ); 
}

add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

別忘了用自己的字體替換字體鏈接。

使用JavaScript加載Google字體

對於這種方法,您需要將代碼複製到Google字體使用說明部分的JavaScript標籤中。 您可以在之後立即將此代碼粘貼到主題或子主題的header.php文件中 標籤。

關於在您的網站上使用Google網絡字體的最後一個技巧是不加載不會使用的字體。 例如,如果您只想要粗體和正常粗細,則不要添加所有其他樣式。

我們希望本文能幫助您以正確的方式在WordPress主題中添加Google Web字體,以便您的網站能夠快速加載。 您可能還需要查看有關如何在WordPress中添加Typekit字體的指南。

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