尋找適合你的 WordPress 主題的最佳 Google 字體
首先,你需要找到你喜歡的 Google 字體。只需訪問 Google 字體網站並瀏覽其庫存。
當你找到喜歡的字體時,點擊它以查看可用的不同樣式。然後點擊 ‘查看選定的系列’ 按鈕,這將打開一個側邊欄。在 ‘網頁使用’ 部分下,你會看到使用說明。
你會發現有兩個添加字體到你網站的選項:第一是鏈接方式,這是添加網頁字體的推薦標準方式。第二選項是使用 @import CSS 方法來通過你的 CSS 樣式表加載字體。我們將向你展示如何使用這些方法以及它們的優缺點。
方法 1:使用插件將 Google 字體添加到主題
對於此方法,我們將使用一個 WordPress 插件來加載 Google 字體。首先,你需要安裝並激活 Fonts 插件。詳情請參閱我們的逐步 WordPress 插件安裝指南。
啟用後,訪問 ‘外觀 » 自定義’ 頁面打開主題自定義器。從這裡,你會看到新的 Fonts 插件選項卡。
點擊它會顯示插件選項。你可以選擇為你網站的不同區域使用 Google 字體。
或者,你也可以只選擇為你的 WordPress 主題加載一個字體。只需切換到 ‘高級設置 » 僅加載字體’ 選項卡。
在這裡,你可以選擇要為你的 WordPress 主題加載的 Google 字體。只需輸入字體名稱並選擇它。
完成後,不要忘記點擊 ‘發布’ 按鈕以保存變更。現在,如果你使用插件的高級功能為網站的不同區域分配字體,那麼這些字體將自動生效。
另一方面,如果你選擇僅加載字體,則需要為它們添加自定義 CSS 規則。例如,這裡是如何為整個網站的段落元素加載一個字體:
p {
font-family: 'Open Sans', sans-serif;
}
方法 2:將 Google 字體添加到主題頭部
這是將 Google 字體直接添加到你的 WordPress 主題的最簡單方法。只需編輯 WordPress 主題或子主題的 header.php 文件。然後,將鏈接代碼粘貼到主題樣式表鏈接代碼之前。
主要目標是儘早放置字體請求。這允許用戶的瀏覽器在呈現頁面之前下載字體。一旦完成後,您可以在主題的 CSS 文件中使用該字體:
h1 {
font-family: 'Open Sans', sans-serif;
}
方法 3:在主題樣式表中添加 Google 字體
對於此方法,我們將在 WordPress 主題的主 CSS 文件中導入字體 CSS。只需編輯主題根文件夾中的 style.css 文件,並將 ‘ @import ‘ 標籤的代碼添加到 CSS 文件的頂部。
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap');
重要提示:確保將 ‘ @import ‘ 行添加到 CSS 文件的頂部。
方法 4:在 WordPress 中正確地佇列 Google 字體
我們之前提到的前兩種方法需要你直接通過編輯 WordPress 主題文件來添加字體。如果你使用子主題進行所有變更,這是可行的。
然而,如果你對主題進行這些變更,然後在下次更新主題時,你的變更將會丟失。一個更簡單的解決方法是,程式化地添加一些代碼,自動加載 WordPress 主題使用的 Google 字體。
為此,你可以將一些自定義代碼片段添加到特定站點的插件中或使用自定義代碼插件。詳情請參閱我們的 WordPress 添加自定義代碼教程。
只需將以下代碼片段添加到你的 WordPress 網站:
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' );
注意:別忘了將URL替換為你要添加的Google字體的URL。
就這樣了,WordPress現在將自動使用鏈接方法來獲取你添加的Google字體。你可以通過查看你網站的源代碼來確認,會看到你的Google字體樣式表添加在網站腳註部分。
附加部分:網頁字體如何影響 WordPress 速度
Google字體加載速度非常快,因為它們通過Google的大型CDN網絡提供,該網絡在全球各地設有伺服器。
由於這些字體被數百萬個網站使用,使用者很可能早已將它們存儲在瀏覽器的緩存中。這減少了它們對網站速度的性能影響。你可以通過在設計中只使用一兩個網頁字體進一步減少這種影響。
更多提示,請參閱我們的 WordPress 性能和速度新手完整指南。
希望這份指南幫助你學會如何輕鬆地將 Google 網頁字體添加到你的 WordPress 主題中。你可能還想看看我們的從頭開始不需要編碼的自定義 WordPress 主題指南和我們的最佳免費網站託管服務列表。
如果你喜歡本文,請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。你也可以在 Twitter 和 Facebook 上找到我們。