我們很高興推出 Cloudflare Fonts！在未來幾週內，使用 Google Fonts 的網站將能夠輕鬆地從網站自己的網域而不是從 Google 載入字型。只需按一下按鈕即可完成所有操作。這增強了隱私性和效能。它無需從 Google 第三方伺服器載入字型，從而增強了使用者的隱私。它透過使字型更接近終端使用者、減少 DNS 查閱和 TLS 連線所花費的時間來提高網站的效能。
目前使用 Google Fonts 的網站無需自行託管字型或進行複雜的程式碼變更即可受益——Cloudflare Fonts 簡化了整個過程，使其變得輕而易舉。
字型和隱私
當您從 Google 載入字型時，您的網站會啟動與 Google 伺服器的資料交換。這意味著訪客的瀏覽器會直接向 Google 傳送請求。因此，Google 有可能積累一系列資料，包括 IP 位址、使用者代理程式（瀏覽器和作業系統的格式化描述）、引用者（顯示 Google 字型的頁面）以及每個 IP 向 Google 發出請求的頻率。雖然 Google 聲明他們不會將這些資料用於有針對性的廣告或設定 cookie，但任何時候只要能避免不必要地分享終端使用者的個人資料，都是隱私的勝利。
藉助 Cloudflare Fonts，您可以直接從自己的網域提供字型。這意味著不會向 Google 等第三方網域傳送字型請求，一些隱私監管機構曾經認為這是一個問題。使用我們的保護隱私方法，您的終端使用者的 IP 位址和其他資料不會傳送到另一個網域。所有這些資訊都在您的控制範圍內，在您的網域內。此外，由於 Cloudflare Fonts 消除了向 Google 等第三方伺服器的資料傳輸，因此可以增強您遵守任何潛在資料當地語系化要求的能力。
透過 Cloudflare 更快地交付 Google 字型
現在我們已經確定 Cloudflare Fonts 可以改善您的隱私，那麼讓我們來看看事物的另一面——Cloudflare Fonts 將如何改善您的效能。
為此，我們首先需要深入研究 Google Fonts 如何影響您網站的效能。隨後，我們將探討 Cloudflare Fonts 如何解決和糾正這些效能挑戰。
Google Fonts 是一項非常棒的資源，它為網站擁有者提供了一系列供網站使用的免版稅字型。當您確定了要使用的字型後，整合起來就非常簡單了。您只需在網站上新增 HTML 程式碼片段，然後新增樣式，將這些字型套用到頁面的各個部分：
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Slab" rel="stylesheet">
<style>
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
font-family: 'Roboto Slab', serif;
}
</style>
但這種易用性會帶來效能損失。
在載入網頁時，訪客的瀏覽器會在開始剖析 HTML 時擷取 CSS 檔案。然後，當瀏覽器開始轉譯頁面並識別出不同文字部分對字型的需求時，就會請求所需的字型檔案。
效能問題就出在這裡。Google Fonts 採用雙網域系統：CSS 位於一個網域 fonts.googleapis.com，而字型檔案位於另一個網域 fonts.gstatic.com。
這種分離導致每個資源請求至少需要四次到第三方伺服器的往返。這些往返行程包括 DNS 查閱、通訊端連線建立、TLS 交涉（對於 HTTPS）以及實際資源請求的最終往返行程。最終，瀏覽器從 Google 伺服器取得字型需要八次往返。
使用者可以看到這一點。如果他們正在使用 Google Fonts，可以開啟網路索引標簽，篩選出這些 Google 網域。
您可以直觀地看到這些請求增加的額外 DNS 請求和 TLS 連線對網站體驗的影響。例如，在我的 WordPress 網站上，原生使用 Google Fonts 作為主題的一部分，額外增加了約 150 毫秒。
快速字型
Cloudflare Fonts 將往返次數從八次減少到一次，從而簡化了這一過程。不再需要兩組 DNS 查閱、通訊端連線和與第三方的 TLS 交涉，因為不再需要第三方伺服器來提供 CSS 或字型服務。唯一的往返會直接從託管 HTML 的同一網域提供字型檔案。這種方法提供了一個額外的優勢：它允許字型與其他頁面資源透過相同的 HTTP/2 或 HTTP/3 連線進行傳輸，從而享有適當的優先順序並防止頻寬爭用。
眼尖的人可能會想「肯定還是兩次往返——CSS 請求呢？」。嗯，利用 Cloudflare Fonts，我們也不再需要單獨的 CSS 請求。這意味著實際上只有一次往返——獲取字型本身。
為了實現字型請求的本地路由以及移除 CSS 請求，我們在 HTML 通過 Cloudflare 全球網路時對其進行了重寫。CSS 回應是嵌入式的，字型 URL 轉換在嵌入式 CSS 中進行。
這些轉換會調整字型 URL，使其與 HTML 內容的網域一致。這些經過修改的回應會無縫地通過 Cloudflare 的快取基礎架構，並在其中自動快取，從而大幅提升效能。如果出現任何快取未命中，我們會使用 Fontsource 和 NPM 來載入這些字型，並將其快取在 Cloudflare 基礎架構中。這種方法可確保不會無意中將資料暴露給 Google 的基礎架構，從而維護效能和資料隱私。
啟用 Cloudflare Fonts 後，您可以在網路索引標簽中看到，字型檔案現在是從 /cf-fonts 路徑中的您自己的主機名稱載入，並從 Cloudflare 離使用者最近的快取中提供，如 cf-cache-status: HIT 所示。
此外，您可以注意到瀏覽器中的計時部分不再需要額外的主機名稱 DNS 查閱或 TLS 連線設定。出現這種情況的原因是，內容是透過您的主機名稱提供的，而瀏覽器已經快取了 DNS 回應並具有開啟的 TLS 連線。
最後，您可以看到 Cloudflare Fonts 的實際效能優勢。在顯示文字的簡單頁面上啟用 Cloudflare Fonts 之前，我們進行了綜合 Google Lighthouse 測試。首次內容繪製 (FCP) 表示第一個內容元素出現在頁面上所需的時間，在 Google 字型測試中測得為 0.9 秒。啟用 Cloudflare Fonts 後，首次內容繪製 (FCP) 縮短至 0.3 秒，我們的 Lighthouse 整體效能得分從 98 分提高到滿分 100 分。
使用 ROFL 加速 Cloudflare Fonts
為了提高 Cloudflare Fonts 的效能，我們需要在回應流經 Cloudflare 網路時快速更改 HTML。這是透過利用 Cloudflare 的一項最新技術實現的。
今年早些時候，我們完成了 Cloudflare 最古老的元件之一的重寫，該元件在動態變更 HTML 內容方面發揮了至關重要的作用。但正如這篇部落格文章中所述，需要一種新的解決方案來取代舊的解決方案——一種記憶體安全的解決方案，能夠擴展以適應 Cloudflare 不斷增加的負載。
這個新模組稱為 ROFL（Response Overseer for FL）。它現在支援各種需要在傳輸時更改 HTML 的 Cloudflare 產品，例如 Email Obfuscation、Rocket Loader 和 HTML 縮製。
ROFL 完全使用 Rust 開發。做出這一決定的原因是 Rust 的記憶體安全、效能和安全性。當我們處理每秒數百萬次的驚人請求量時，Rust 的記憶體安全特性對於確保防止記憶體洩漏是不可或缺的。Rust 的編譯性質使我們能夠針對特定硬體設定精細地最佳化程式碼，與解釋型語言相比，其效能提升令人印象深刻。
ROFL 為 Cloudflare Fonts 的開發鋪平了道路。ROFL 的效能使我們能夠快速、安全、高效地即時重寫 HTML 並修改 Google 字型連結。這種速度可協助我們減少處理 HTML 檔案增加的延遲，提高網站效能。
釋放 Cloudflare Fonts 的力量！ 🚀
Cloudflare Fonts 將於 10 月份向所有 Cloudflare 客戶提供。如果您正在使用 Google Fonts，您將能夠提升網站的隱私和速度。啟用該功能後，您可以無縫地提高網站效能，同時保護使用者隱私。