使用商業主題時，WordPress網站看起來很漂亮。這些高階主題使用縮圖和好看的字型來製作吸引人的外觀。然而，酷炫的外觀伴隨著您作為網站所有者需要承擔的一定成本。在本文中，讓我們探討字型問題以及如何在WordPress站點中禁用Google字型。
在WordPress中使用字型
以下是在WordPress中使用字型的流行方式，您可以隨時切換使用字型的方式。
- 使用第三方字型，如Google Fonts
- 在您的伺服器上託管自定義字型
- 使用系統字型
無論您使用什麼方式；您需要以下三件事才能使用任何字型系列：
- 具有不同副檔名的字型檔案，如woff、eot、ttf或svg。雖然主要使用一個檔案，但其餘檔案用於後備和相容性目的。或者，您可以使用CSS字型檔案，尤其是從Google字型網站載入時。
- 將字型從檔案匯入到您的站點。CSS字型匯入在早期很流行，現在在標題部分連結外部字型檔案很常見。
- 在HTML元素中使用CSS規則來提及字型系列和其他屬性。
這是一個使用外部檔案連結的示例CSS，用於在標題部分使用具有常規400粗的Roboto系列。
<link href="https://fonts.googleapis.com"> <link href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
以下是如何在HTML中使用帶有H1標題的Roboto字型系列：
h1 {
font-family: 'Roboto', sans-serif;
}
據說頁面上的每個HTML元素都需要一個字型系列來呈現它在瀏覽器上的預期顯示方式。
WordPress中的谷歌字型
通常為HTML body元素宣告字型系列，以便整個頁面使用相同的字型。然而，那些好看的主題需要對標題、塊引用、預格式化、表格、按鈕等元素使用不同的字型系列。為了避免設計多種字型或支付許可費用，許多WordPress主題和外掛開發人員使用免費的第三方 -派對字型。谷歌字型的使用與谷歌的流行和CDN的能力一起提供了更接近您網站訪問者的字型檔案。
谷歌字型
10個商業WordPress主題中幾乎有7個使用Google字型並提供自定義主題面板。您可以從1250多種可用字型系列中選擇一種。由於有大量的字型可供免費使用，開發人員可以簡單地將所需的Google字型檔案與標題部分中的系列和重量詳細資訊聯絡起來。您可以通過檢視您網站的原始碼來檢視您網站上的Google字型檔案。
原始碼中的Google字型CSS檔案
您可以看到字型是從fonts.googleapis.com伺服器載入的。Open Sans和Roboto是字型系列，400/600表示字型粗細。有時您可能還會看到字型是從諸如fonts.gstatic.com之類的Google域載入的。
使用多種和外部字型的問題
在WordPress中使用Google字型會產生以下問題：
- 任何第三方資源都會影響您網站的頁面載入速度。示例包括Google字型、分析跟蹤、Facebook畫素等。
- 使用多個字型系列和字型粗細會增加 Google 伺服器所需的外部檔案數量。這將增加從您的站點傳送的 HTTP 請求的數量，從而降低頁面載入速度。
- 在從Google伺服器下載所有字型檔案之前，瀏覽器不會載入文字。這可能需要一些時間，在此期間使用者將看到空白的空白頁面。您將在Google PageSpeed Insights工具中看到警告，以確保在網路字型載入期間文字可見。
- 您可能需要使用預連線和DNS預取來連線到Google字型域，以加快網站的載入速度。
由於速度是Google搜尋中的官方排名因素之一，因此您沒有其他選擇可以避免使用第三方Google字型。
如何在WordPress中禁用谷歌字型？
現在很明顯，您必須在WordPress中禁用Google字型以提高頁面載入速度。但問題是當您的主題和外掛使用Google字型時，如何在影響或不影響網站外觀的情況下做到這一點。以下是可供您選擇的選項。
- 完全禁用Google字型，以便您的網站使用瀏覽器的備用字型。
- 將swap引數新增到Google字型檔案並繼續使用它們。
- 通過新增自定義CSS或更改主題來使用系統字型。
我們將在以下部分探討所有這些選項。
#1 – 完全禁用WordPress中的Google字型
隨著Google字型成為速度問題，幾乎所有快取和速度優化外掛都提供了從您的網站合併或刪除Google字型的功能。我們推薦的最佳選擇是使用Perfmatters外掛，該外掛還附帶一套完整的選項來消除腹脹。例如，如果您使用WooCommerce外掛，您只需點選幾下即可禁用文章和頁面上的WooCommerce樣式和指令碼。
- 在您的網站上購買並安裝Perfmatters外掛。
- 轉到“設定 > Perfmatters”選單。
- 導航到“Fonts”部分下的“Options”選項卡。
- 啟用針對“Disable Google Fonts”選項的按鈕。
- 單擊“儲存更改”按鈕以應用更改。
在Perfmatters外掛中禁用Google字型
如果您不想使用付費外掛，請轉到儀表板中的“外掛 > 安裝外掛”部分並安裝“Disable and Remove Google Fonts”外掛。這是一個免費且專用的外掛，它只做一項工作即可完全擺脫您網站上的Google字型。
Disable and Remove Google Fonts外掛
令人驚訝的是該外掛沒有任何煩人的設定頁面。您所需要的只是在您的站點上安裝並啟用它。
其他免費選項包括Auto optimize，它與快取選項一起很有用。如果您在SiteGround主機上，請使用SG Optimizer外掛來組合所有Google字型以減少HTTP請求的數量。
#2 – 設定谷歌字型Swap顯示
如上所述，不使用谷歌字型的主要原因之一是它會延遲文字內容的載入。要處理這個問題，您可以使用如下CSS屬性：
對於使用外部字型檔案：
<link href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
與CSS @import一起使用：
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>
最近，Google推出了對CSS font-display:swap屬性與Google Fonts的支援。這實質上意味著您可以指示瀏覽器首先使用預設瀏覽器的字型，直到Google字型檔案可用。當瀏覽器完成下載谷歌字型檔案時，它會交換顯示並使用谷歌字型。這樣，檢視文字內容不會有延遲。這將幫助您解決問題，例如確保在Google PageSpeed Insights工具中載入網路字型期間文字保持可見。
為了實現字型交換，您可以使用Swap Google Fonts Display外掛。該外掛也沒有任何設定，您只需在您的站點上啟用外掛即可在所有Google字型檔案中新增display=swap值。
Swap Google Fonts Display外掛
#3 – 使用系統字型
最近，許多WordPress主題都提供了使用系統字型堆疊和Google字型的選項。例如，您可以為此目的使用流行的輕量級主題（如GeneratePress ）。您只需在定製器設定中選擇系統字型選項即可。
在GeneratePress主題中使用系統字型堆疊
如果您想在站點中手動使用系統字型，只需在“外觀 > 自定義 > 新增CSS”部分下新增以下CSS。此CSS僅適用於body元素，如果需要，您可能需要在宣告中新增其他元素。此外，您必須手動刪除其他CSS匯入或檔案連結，以避免同時載入這些字型檔案。
body {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
雖然這是一個簡單的選項，但在使用系統字型時，您不會在所有裝置中都有固定的字型顯示。
小結
無論您使用哪種方法，請確保測試該站點的原始碼中不包含任何Google字型檔案。如果您使用交換選項，請檢查字型CSS檔案是否包含display=swap屬性。此外，使用Google PageSpeed Insights工具測試您的網站，以確保沒有與字型相關的警告。
評論留言