美麗的字體排版可以改善您網站的設計並吸引觀眾。然而,作為 WordPress 性能專家,我們發現依賴第三方字體服務可能會減慢您的網站速度,損害用戶體驗並可能影響SEO。
解決方法是本地託管字體。通過掌控您的字體文件,您的網站可以略過那些額外的加載步驟,確保網站快速加載,提升用戶體驗並優化SEO。
在這篇文章中,我們將展示如何在 WordPress 中本地託管字體,讓您的網站既具有吸引力又性能優異。
為什麼要在 WordPress 上本地託管字體?
雖然字體排版和自定義字體可以提高網站的整體美感,但它們對您的 WordPress 性能有負面影響。例如,如果您使用來自 Google 字體的自定義字體,那麼它們將從第三方服務加載,這會減慢您的網站速度。
幸運的是,有一種方法可以在不減慢網站速度的情況下使用自定義字體。WordPress 6.0 中引入了一個新的 Webfonts API,這允許您本地託管字體,使其加載速度更快。
本地託管 Google 字體的另一個原因是為了保持 GDPR 合規。如果您有來自歐盟的網站訪客,這是一個重要的法律考慮因素。
當有人訪問使用 Google 字體的網站時,他們的IP地址在字體加載時會被Google記錄下來。由於這是未經他們允許的,因此歐盟現在認為這是違反隱私法規的,您可能需要對此負責。
說到這裡,讓我們來看看如何在 WordPress 中本地託管字體以加快網站速度。我們將介紹兩種方法,第一種方法推薦給大多數用戶使用。
使用插件在 WordPress 上本地託管字體
首先,您需要安裝並啟用 OMGF(Optimize My Google Fonts)插件。有關更多詳細信息,請參閱我們的逐步指南,了解如何安裝 WordPress 插件。
OMGF 是最好的 WordPress 字體排版插件之一。它提供了一種適合初學者使用的方式來改善性能並通過本地託管 Google 字體來實現 GDPR 合規。
激活後,您需要訪問設置 » 優化 Google 字體來配置插件。您應該看到“優化字體”選項卡。
請注意“優化 Google 字體”標題下的聲明,您只需要使用默認設置來自動將您的 Google 字體替換為本地託管的副本。
這意味著當您向下滾動設置頁面時,所有需要做的就是確保字體顯示選項的默認設置為“替換(推薦)”。
現在您只需要點擊頁面底部的“保存並優化”按鈕。
您將在屏幕頂部看到一條消息,說明“優化已成功完成”。
恭喜!您的 Google 字體現在已本地託管。您的網站將加載更快,並且減少了被歐洲法律起訴的風險。
手動在 WordPress 上本地託管字體
您也可以使用我們關於如何在 WordPress 中添加自定義字體的指南中的 @font-face 方法,手動本地託管字體。雖然這種方法需要更多的工作,但它允許您在網站上使用任何您喜歡的字體。
您需要下載您希望使用的字體,並確保它們是網頁格式。在很多地方可以找到免費的網頁字體,如 Google Fonts, Typekit, FontSquirrel 等。
如果您的字體沒有網頁格式,您可以使用 FontSquirrel Webfont 生成器進行轉換。
現在您需要將字體存儲在您的 WordPress 託管服務器上。您可以使用 FTP 或使用主機的 cPanel 文件管理器上傳文件。
您應該在您的主題或子主題目錄中創建一個名為 “fonts” 的新文件夾,然後將字體上傳到那裡。
上傳字體後,您需要使用自定義 CSS 在主題樣式表中加載字體。您可以將代碼直接添加到主題的 style.css 文件,或者使用主題定制器的附加 CSS 部分。
您可以使用 CSS3 @font-face 規則來完成這一操作,如下所示:
@font-face {
font-family: Arvo;
src: url(http://example.com/wp-content/themes/twentytwentyone/fonts/Arvo-Regular.ttf);
font-weight: normal;
}
不要忘記用您的字體家族和URL替換。
之後,您可以在主題樣式表或主題定制器的附加CSS部分的任何地方使用該字體。您使用的CSS將取決於您的主題以及您希望在哪裡使用本地字體。這是我們示範網站的示例:
h1 {
font-family: Arvo, Arial, sans-serif;
}
如您所見,我們的標題現在使用的是本地託管的 Arvo 字體。
WordPress 字體的專家指南
現在您知道如何本地託管字體,您可能會希望查看一些關於在 WordPress 中使用字體的其他指南。
- 什麼是 Web 安全字體 + 19 種最佳 Web 安全字體
- 如何更改您的 WordPress 主題中的字體(簡單方法)
- 如何輕鬆更改 WordPress 中的字體大小
- 如何在 WordPress 中添加自定義字體
- 如何使 Google 字體隱私友好
- 如何在您的 WordPress 網站上禁用 Google 字體
- 如何輕鬆在您的 WordPress 主題中添加圖標字體
- 改善設計的最佳 WordPress 字體排版插件
我們希望這個教程能幫助您學習如何在 WordPress 中本地託管字體以加快網站速度。您可能也會希望查看我們的指南,了解如何增加您的博客流量,或我們精選的必要 WordPress 插件以促進您的網站增長。
如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。