在 WordPress 中使用 Web 字體 API 的旅程對開發人員來說就像坐過山車一樣。 成為後 從 WordPress 5.9 版本中刪除，它被轉移到 Gutenberg 項目，在那裡它可以與依賴它的相關功能一起構建。
該 API 已 合併到 Gutenberg 插件中 並且應該登陸版本 12.8。 想要測試它的主題作者可以克隆插件的開發版本或 下載每晚版本 來自古騰堡時報。
喬諾·奧爾德森打開 原票 2019 年 2 月的 Web 字體 API。然而，直到 2021 年底，它才獲得了大量的 支持和發展. 大多數人認為，該 API 看起來已準備好與 WordPress 5.9 一起發布。 然而，它被 WordPress 的主要開發者之一 Andrew Ozz 擱置了。
這不是一個受歡迎的決定，但它可能是最好的方向。 該 API 受到限制，因為它還沒有 theme.json 支持。 只能通過 PHP 獲得意味著主題作者大部分時間都在做他們一直在做的事情——推出他們自己的解決方案。 這不是它推出的阻礙，但它可能是 API 最常見的用例。
雖然許多人希望在 WordPress 5.9 中看到這個功能，但額外的幾個月已經給了它時間演變成一個更清潔的 API，與網站和內容編輯器集成。
主題作者現在可以在 theme.json 文件中定義字體定義以及相應的系列，WordPress 將自動在編輯器和前端載入必要的 @font-face CSS。 我已經對此進行了廣泛的測試，並且沒有遇到任何問題。
潛在的缺點是該功能僅支持本地提供商，這意味著字體必須與主題捆綁在一起。 Google Fonts 提供程序是原始實現的一部分，但後來被刪除。
奧茲進入 更早的票中的更多詳細信息，但他的建議是暫時放棄對 Google 字體的支持：
現在僅添加對本地字體的支持。 如果 WordPress 決定稍後包含對 Google CDN 的支持，則實施將不得不考慮網路隱私法律和限制，並與最終的用戶同意 API 等相關聯。
相關文章： 德國法院對使用 Google 託管字體違反 GDPR 的網站所有者處以罰款
Ari Stathopoulos 是 Web 字體 API 背後的開發人員之一，他解釋說，在核心中捆綁一個解決方案，將字體文件直接寫入伺服器 會改善隱私：
與其刪除它，也許我們可以正確地實施它們，強制執行本地託管的網路字體以提高性能和隱私？ 通過這種方式，我們將樹立一個很好的榜樣，我們會看到 WP 生態系統的性能和隱私顯著改善，因為當前使用 Google-fonts、Adobe-fonts 等的主題和插件將開始採用 API。
目前，似乎官方支持本地字體，但主題和插件作者必須註冊自定義提供程序。 忽略谷歌字體支持的一個擔憂是，在野外會有許多競爭解決方案，而不是每個人都可以依賴的可靠供應商。 開發人員構建自己的輪子越多，不同的實現就越有可能出現錯誤或安全問題。
Automattic 已經有一個 Google 提供商的草稿補丁 噴氣背包。 假設它被拉入插件，它無疑會與註冊自己的谷歌提供商 ID 的主題衝突。
僅支持本地字體也可以創建更大的主題下載大小。 對於許多主題來說，這應該不是問題。 一種、兩種或三種字體包是合理的。 但是，如果全球風格變體變得流行，我們可能會看到包含數十種字體以涵蓋多種預打包設計的主題。 這將很快導致主題文件膨脹，並且結合足夠的圖像，主題作者可能會達到 10MB 的限制以提交到目錄。 這感覺有點像明天的問題，但這是今天開始考慮的事情。
圍繞 API 仍有一些問題需要解決。 然而，在 WordPress 6.0 發布周期的早期推動它，將給每個人時間來測試和幫助改進它。
測試捆綁字體
使用 WordPress 註冊網路字體有兩種方法。 對於主題作者來說，最簡單的解決方案是通過他們的 theme.json 文件來定義它們。 這是我將在下面介紹的方法，因為該文件自 WordPress 5.8 以來一直是標準文件。 有一個PHP示例 拉取請求票.
theme.json 的鍵和值大多對應於 CSS @font-face 規則。 主題作者應該 刷上它 如果他們使用它已經有一段時間了。
為了測試，我通過我的主題註冊了三種網路字體，下面的屏幕截圖顯示了它們在編輯器中的作用：
測試三種網路字體。
Web 字體應在 settings.typography.fontFamily 下註冊，作為特定字體系列定義的一部分。 以下是我使用 Cabin 字體在我的一個主題中測試的代碼副本：
{「設置」：{「排版」：{「fontFamilies」： [ { “fontFamily”: “”Cabin”, sans-serif”, “slug”: “primary”, “name”: “Primary”, “fontFace”: [ { “fontFamily”: “Cabin”, “fontWeight”: “400 700”, “fontStyle”: “normal”, “src”: [ “file:./public/fonts/cabin/Cabin-VariableFont_wdth,wght.ttf” ] }，{「fontFamily」：「小屋」，「fontWeight」：「400 700」，「fontStyle」：「斜體」，「src」： [ “file:./public/fonts/cabin/Cabin-Italic-VariableFont_wdth,wght.ttf” ] } ]} ]} } }
請注意， file:./public/fonts/*.ttf 是相對於主題文件夾的。 主題作者需要調整它以適應他們的主題結構。
像這樣
載入中…