CI 指定中文字型上站：小心 WOFF2 轉檔餵食

設計指定中文字型要放到網站上，看起來通常是一個很直覺的任務：下載字型、轉成 WOFF2、上傳到 Custom Fonts，然後套用到 heading。

這次遇到的狀況是：字型真的有套上，DevTools 也看得到相關設定，但畫面上的部分中文字形與標點卻開始怪掉。最後確認問題不是 WordPress、主題或 CSS selector，而是線上工具轉出的 WOFF2 本身不乾淨。

為什麼這個坑值得分享

中文字型上站，不是「能載入」就算完成。尤其是品牌或 CI 指定字型，正式交付前還要確認實際字形、全形標點、fallback 與轉檔品質。

• 字型有載入，不代表 glyph 一定正常。
• Computed font-family 命中，不代表 WOFF2 檔案一定乾淨。
• 線上轉檔工具產出可用檔案，不代表適合正式交付。

現象：看起來成功，但字怪怪的

一開始最容易以為是字型沒有套到，或是主題、區塊外掛的 CSS 沒有命中。但實際檢查後，問題不是「完全沒載入」，而是「載入了，但渲染出來的 glyph 不對」。

• 原始文字內容沒有錯。
• 前台不是單純 fallback。
• 字型看似有套用。
• 但部分中文字形與標點顯示異常。

排查：不是 CSS 沒命中

接著用 DevTools 檢查 Computed style，確認目標元素已經吃到 custom font-family。這一步讓排查方向從 CSS、selector、theme typography，轉向 webfont 檔案本身。

也就是說，這次不是「字型沒套上」，而是「套上了一個有問題的 WOFF2」。

處理：改成本機轉 WOFF2

後來改成本機工具重新轉檔，先不急著 subset 或過度壓縮，而是先確認完整字型轉出後，常用中文字、全形標點與瀏覽器渲染都正常。

1. 安裝與準備轉檔工具。
2. 切到字型檔目錄，確認原始 OTF 檔案。
3. 逐一轉出不同字重的 WOFF2，並確認輸出結果。

• Terminal：用來切換目錄、確認檔案列表與執行轉檔指令。
  Apple Terminal User Guide for Mac
• Python / pip：用來安裝這次需要的字型處理套件。
  Python documentation: Installing Python Modules
  pip documentation: Getting Started
• fontTools：負責讀寫 OpenType / TrueType 字型，並輸出 WOFF2。
  fontTools documentation: ttLib
  fontTools documentation: WOFF2
• brotli：提供 WOFF2 格式背後需要的壓縮支援。
  W3C: WOFF File Format 2.0
  Brotli compressed data format

結果：同樣設定，換檔後正常

重新轉檔後，網站設定沒有整套重做，也不是換主題或換區塊外掛。同一個 custom font-family、同一套 typography 設定，換成本機轉出的 WOFF2 後，字形就恢復正常。

這也回頭驗證了前面的判斷：真正的差異不是 CSS，而是字型檔來源與轉檔品質。

Takeaway：中文字型不是能載入就算完成

特別是品牌或 CI 指定字型，正式交付前至少要檢查這幾件事：

• 實際字形是否正常。
• 常用中文字與全形標點是否正常。
• DevTools Computed font-family 是否命中。
• DevTools Fonts / fallback 是否符合預期。
• WOFF2 來源與轉檔工具是否可靠。

CSS 有套到，字型也有載入，但字形渲染不對。最後確認不是網站設定問題，而是 WOFF2 轉檔品質問題。

中文字型上站，請小心轉檔餵食。