Cloudflare Fonts:讓網頁字型載入更快更安全,一鍵啟用提升隱私與效能

Cloudflare Fonts
圖片來源 / Cloudflare 部落格

前陣子在介紹 Bunny Fonts 服務時有提到這是一個開源、隱私優先的網頁字型平台,也是 Google Fonts 替代方案,儘管許多人都會直接選擇 Google Fonts 做為網頁字型使用,但它在效能和隱私表現並不理想,更好的做法是選擇其他服務或是自行託管字型檔,例如從 Fontsource 可以下載需要的開源字型,再將他們運用在網頁是應用程式開發。

如果網站有使用 Cloudflare 服務的話,其實它也內建「Cloudflare Fonts」功能,啟用後就能增強網頁字型的隱私和速度表現,全自動、不需要任何額外設定,相較於自託管字型檔來說可能會更簡單。

在「Cloudflare Fonts:增強網站字型隱私權和速度」有官方完整說明(中文版)。

簡單來說,Cloudflare Fonts 可以讓網站從自己的網域去載入 Google 字型,無需再從 Google 第三方伺服器載入字型,增強隱私性和效能,Cloudflare 會將字型檔案快取在邊緣伺服器(Edge),當開啟網頁時會自動改寫 Google Fonts 請求,減少 DNS 查詢和 TLS 連線造成的延遲,利用 CDN 服務加快載入速度。

Cloudflare Fonts 不會在傳送字體過程中收集或是紀錄使用者資料。

當然,若有能力的話還是自託管字型比較一勞永逸,不確定怎麼做的話也能直接開啟 Cloudflare Fonts 讓服務端來幫你完成這些設定,目前這個功能已經全面開放給 Cloudflare 使用者,無論你是免費或付費用戶都能找到這個功能。

如何啟用 Cloudflare Fonts?

Google Fonts 功能的位置在登入 Cloudflare 控制台、選擇要設定的網域名稱,接著從左側選單「Speed」找到「Optimization」,再從上方分頁找到「Content Optimization」後就能看到。

Cloudflare Fonts

如果是使用 Cloudflare 繁體中文版則是在「速度」的「最佳化」,再從上方找到「內容最佳化」就可看到對應的 Cloudflare Fonts 功能(有時候覺得 Cloudflare 中文介面反而很難找到對應功能,我還是比較習慣將它切換為英文版)。

Cloudflare Fonts

將 Cloudflare Fonts 啟用後就會自動處理,具體來說它會直接改動 HTML 頁面中的 Google Fonts 樣式表和路徑,就能避免從 Google 伺服器來取得字型檔,而字型會從使用者的域名直接載入(路徑會有一行 /cf-fonts),進而降低延遲,同時提高隱私和載入速度。

Cloudflare 官方表示這項功能可以降低首次內容繪製(FCP)時間,改善效能得分。

Cloudflare Fonts

不過要注意的是 Cloudflare Fonts 依然有一些限制存在:

  1. 目前只有支援 Google Fonts 轉換,不支援其他雲端字型服務。
  2. 如果網站有啟用 Automatic Platform Optimization(APO)的話這個功能不會運作(Cloudflare APO 會使用類似方式自動最佳化字型)。
  3. Cloudflare Fonts 不修改  Content Security Policy(CSP)標頭,某些設定可能會讓字型無法運作。
  4. 在不支援這個功能的情況下它會正常回退到使用 Google Fonts 。

如果你的網站使用 Google Fonts,啟用 Cloudflare Fonts 是提升隱私與效能的簡易方法,免費且自動化,適合所有 Cloudflare 用戶(包括免費版本也可使用)。不過,如果希望完全掌控字型,自託管仍是最佳選擇。


探索更多來自 免費資源網路社群 的內容

訂閱即可透過電子郵件收到最新文章。