如何在 WordPress 中託管本地字體以獲得更快的網站速度

您想在不降低網站速度的情況下向您的網站添加第三方字體嗎?

自定義字體可以改善網站的版式和用戶體驗,但載入時間會更長。 好消息是您可以在本地託管您的字體以確保您的網站始終快速。

在本文中,我們將向您展示如何在 WordPress 中託管本地字體。

如何在 WordPress 中託管本地字體以獲得更快的網站

為什麼在 WordPress 中本地託管字體?

雖然排版和自定義字體可以改善網站的整體美感,但它們確實會對您的WordPress性能產生負面影響。 例如,如果您使用的是來自 Google 字體的自訂字體,那麼它們是從第三方服務載入的,這會降低您網站的速度。

幸運的是,有一種方法可以在不降低網站速度的情況下使用自定義字體。 WordPress 6.0中引入了一個新的 Webfonts API 。 這使您可以在本地託管字體,以便更快地載入它們。

在本地託管 Google 字體的另一個原因是保持 GDPR 合規性。 如果您有來自歐盟的網站訪問者,這是一個重要的法律考慮因素。

當有人訪問使用谷歌字體的網站時,他們的IP位址會在載入字體時被谷歌記錄下來。 因為這是在未經他們許可的情況下進行的,歐盟現在認為這違反了隱私法規,您可能需要承擔損害賠償責任。

話雖如此,讓我們來看看如何在 WordPress 中託管本地字體以獲得更快的網站。 我們將介紹兩種方法,建議大多數使用者使用第一種方法。

方法 1:使用外掛程式在 WordPress 中託管本地字體

您需要做的第一件事是安裝並啟動OMGF(優化我的谷歌字體)外掛程式。

OMGF 是最好的WordPress 排版外掛程式之一。 它提供了一種初學者友好的方式,通過在本地託管 Google 字體來提高性能和 GDPR 合規性。

啟動后,您需要訪問設置»優化谷歌字體來配置外掛程式。 您應該查看「優化字體」選項卡。

請注意「優化 Google 字體」標題下的聲明,您只需使用預設設置即可使用本地託管的副本自動替換您的 Google 字體。

OMGF 設置

這意味著當您向下滾動設置頁面時,您需要做的就是確保“字體顯示選項”選擇了預設設置“交換(推薦)”。

您現在需要做的就是按下頁面底部的「保存並優化」 按鈕。

按下保存並優化按鈕

您會在屏幕頂部看到一條消息,內容為「優化已成功完成」。

恭喜! 您的Google字體現在託管在本地。 您的網站將載入得更快,並且您已經降低了歐洲訴訟的風險。

方法 2:在 WordPress 中手動託管本地字體

您還可以在不使用外掛程式的情況下在本地託管字體,雖然此方法需要更多工作,但它允許您在網站上使用您喜歡的任何字體。

您需要以 Web 格式下載您希望使用的字型。 有很多地方可以找到很棒的免費網路字體,例如Google Fonts、Typekit、FontSquirrel 等等。

下載谷歌字體

如果您的字體沒有 Web 格式,則可以使用 FontSquirrel Webfont generator轉換它。

現在您需要將字體存儲在您的 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 字體。

使用主題定製器添加自定義 CSS
分享你的喜愛

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *